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
69 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 51

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 6

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
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 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 51

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 51

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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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 51

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 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 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 51

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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
We will take a look at the d3.js library for visualizations.  I will provide a walkthrough of a short bar graph example as well as introduce you to the d3.js API.  We also will explore links of other examples and further information regarding SVG's.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

758 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now