[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 106
  • Last Modified:

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

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
Eduardo Fuerte
Asked:
Eduardo Fuerte
  • 8
  • 7
2 Solutions
 
Julian HansenCommented:
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
 
Mukesh YadavFull Stack DeveloperCommented:
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
 
Eduardo FuerteAuthor Commented:
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Julian HansenCommented:
@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
 
Eduardo FuerteAuthor Commented:
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
 
Julian HansenCommented:
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
 
Eduardo FuerteAuthor Commented:
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
 
Julian HansenCommented:
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
 
Eduardo FuerteAuthor Commented:
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
 
Julian HansenCommented:
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
 
Julian HansenCommented:
         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
 
Eduardo FuerteAuthor Commented:
@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
 
Julian HansenCommented:
No problem, when you are ready.
0
 
Eduardo FuerteAuthor Commented:
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
 
Eduardo FuerteAuthor Commented:
Thanks for help in concepts and code!
0
 
Eduardo FuerteAuthor Commented:
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 8
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now