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
73 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 52

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 52

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 52

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 52

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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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 52

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 52

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 52

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

911 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

21 Experts available now in Live!

Get 1:1 Help Now