Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Could you give me a path on how to obtain this show/ hide behavior by using a Codeigniter view?

Posted on 2016-09-30
16
Medium Priority
?
103 Views
Last Modified: 2016-10-07
Hi Experts


When the view is presented:

1st) The value of Houve Custo? -  obtained from a db table is set to Não (No) -   so no other textbox is shown.
img001
2nd) The Value of Houve Custo? is set to Sim (Yes) - so other textbox are shown accordingly with values retrieved from db table.
img002
I guess the controller must have a function to check the value of Houve Custo? and then, accordingly to it a jQuery function must show or hide the correspondently textbox.

Could you give me general approach to this problem?

Thanks in advance
0
Comment
Question by:Eduardo Fuerte
  • 8
  • 7
16 Comments
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41823370
Why not just do it all in jQuery
$(function() {
   setViewState($('#HouveCusto').val());

   $('#HouveCusto').change(function() {
        setViewState($(this).val());
   });
});

function setViewState(val)
{
  if (val == 'Sim') {
     // Show 
  }
  else {
    // hide
  }
}

Open in new window

0
 
LVL 9

Expert Comment

by:Mukesh Yadav
ID: 41823376
You want to hide or show some items on initial page load based on the values you are getting from database right?

Then you can hide or show elements using php by adding style display property with the element. and then bind an change event to hide or show element after page load value changes.

Hope this approach works for you!

Thanks
0
 

Author Comment

by:Eduardo Fuerte
ID: 41823406
Hi

But the view must first check if a table column has a value and if so then change the  "Houve Valor?" combo to "Sim" and then presents the other textboxes. If not, it doesn't presents.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 41823456
@Eduardo,

Please see my last post. You have two options
1. Get caught up in a lot of complicated server side code checking values and writing if ... then ... else blocks to hide show elements.

2. You simply set the value of the boxes and don't worry about hiding them. On page load you run some javascript that shows / hides the relevant boxes.

What I usually do is hide them with CSS - irrespective of value and then on load I show them if they need them to be displayed - that way you don't get the controls flashing on the screen.

In the code I posted I made it so that you use the same function to initialise the view on page load as to set the state after a change in value. All you would need to add to the above is the CSS to hide the other text boxes.

If the above does not make sense - post back and I will provide a sample.
0
 

Author Comment

by:Eduardo Fuerte
ID: 41823619
Hi @Julian

Really, going your way it's easier. In the meanwhile I found the columns value are retrieved just isn't presented in the view


  $("#divReembolso").hide();
        $(".custo").hide();
        $("#reembolso").hide();
        
        
          if ($('#custo').val() != 'null') 
          {
                $(".custo").show();
                $(".houve_reembolso").show();
          }
          else 
          {
                 $(".custo").hide();
                 $("#divReembolso").hide();
          }
    
          if ($('#reembolso').val() != 'null') 
          {
                $("#reembolso").show();
          }
          else 
          {         
                $("#reembolso").hide();
          }

Open in new window

0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41823703
You can make it a bit simpler - by giving all the controls that must be hidden / shown together the same class (ex. options) Then you can simply do

$('.options').show() / $('.options').hide()

Open in new window


To show / hide multiple elements.

Not sure what you mean by this statement
In the meanwhile I found the columns value are retrieved just isn't presented in the view
0
 

Author Comment

by:Eduardo Fuerte
ID: 41823872
You're meaning to use an "empty css" class directive just to group the elements that must have the same behavior?
F.e.
<input type='text'id='custo' name='custo' class="option" placeholder=""/>
<input type='text'id='reembolso' name='reembolso' class="option" placeholder=""/>

Open in new window


What I found in the meanwhile was that I hadn't to modify the model since all the needed values are retrieved yet.
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41823882
In essence yes.

I am still not clear if the above is working for you - I am getting the impression that the form data is not populating - is this correct?
0
 

Author Comment

by:Eduardo Fuerte
ID: 41824084
Really, the form data is not populating

View
<div class="row">               
<div class="col-xs-4 mb20 custo" style="display: none;">
    <label for="custo_v" class="field-label text-muted mb10">Custo</label>
    <div class="input-group">
        <span class="input-group-addon">
            <i class="fa fa-money c-gray"></i>
        </span>
        <span class="validar">
            <input type="text" name="custo_v" id="custo_v" class="form-control gui-input br-light light" placeholder="">
        </span>
    </div>
</div>
</div>
                                 
<div class="row">         
    <div class="col-xs-4 mb20 reembolso" style="display: none;">
        <label for="reembolso" class="field-label text-muted mb10">Reembolso</label>
        <div class="input-group">
            <span class="input-group-addon">
                <i class="fa fa-money c-gray"></i>
            </span>
            <span class="validar">
                <input type="text" name="reembolso_v" id="reembolso_v" class="form-control gui-input br-light light" placeholder="">
            </span>
        </div>
    </div>
  </div>

Open in new window


jQuery

$(function () {

        // Data to be actualized
        // 2nd Modal code
         if ($('#custo_v').val() != 'null') 
         {
                $("#custo_v").show();            
         }
          else 
          {
                $("#custo_v").hide();
          }         
 
         if ($('#reembolso_v').val() != 'null') 
          {
                 $('#reembolso_v').show();
          }
          else 
          {         
               $('#reembolso_v').hide();
          }
       

      // 1st Modal code: Runs OK
         $("#divReembolso").hide();
         $("#houve_custo").change(function() {
            var serv = $( "#houve_custo option:selected" ).text();
            if (serv != 'Sim')
            {
                $(".custo").hide();
                $("#divReembolso").hide();
            }
            else
            {
                $(".custo").show();
                $("#divReembolso").show();
            }
        });

        $("#houve_reembolso").change(function() {
            var serv = $( "#houve_reembolso option:selected" ).text();

            if (serv != 'Sim')
                $(".reembolso").hide();
                
            else
                $(".reembolso").show();
                
        });

Open in new window

0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41824191
So is this question about how to populate the form or how to set the state of the secondary controls based on the value in Houve Casto box?
0
 
LVL 60

Assisted Solution

by:Julian Hansen
Julian Hansen earned 2000 total points
ID: 41824198
         if ($('#custo_v').val() != 'null') 
         {
                $("#custo_v").show();            
         }
          else 
          {
                $("#custo_v").hide();
          }         

Open in new window

I would do like this
CSS (Assume hidden)
#custo_v { display: none }

Open in new window

jQuery (Show if has a value)
if ($('#custo_v').val()) $('#custo_v').show();

Open in new window

0
 

Author Comment

by:Eduardo Fuerte
ID: 41826191
@Julian

Sorry, since I'm very new on this project I have to frequently remake my mind on how to deal with. So the confusion I produced. Give me a litle more time to return this question to the correct focus, please.
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41826224
No problem, when you are ready.
0
 

Author Comment

by:Eduardo Fuerte
ID: 41832396
Hi @Julian


What you alrealdy posted in this question is beeing considerated conceptually and to improve my code.

But I better resumed what I need to complement this question on:

https://www.experts-exchange.com/questions/28974061/Could-you-point-a-jQuery-code-to-make-a-form-control-enabled-after-it-had-been-disabled.html

Could you give a look?
0
 

Author Closing Comment

by:Eduardo Fuerte
ID: 41833535
Thanks for help in concepts and code!
0
 

Author Comment

by:Eduardo Fuerte
ID: 41833554
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

These days socially coordinated efforts have turned into a critical requirement for enterprises.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question