Yii Framework Forum: Best way to hide/show elements dinamically - Yii Framework Forum

Jump to content

  • (2 Pages)
  • +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

Best way to hide/show elements dinamically Rate Topic: -----

#1 User is offline   ricardograna 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 375
  • Joined: 31-March 09
  • Location:Manaus/AM - Brazil

Posted 12 August 2009 - 08:15 AM

I am asking this because I don't have so much knowledge about jQuery.

My form have a dropdownList with Yes/No options. If user select 'Yes', my form must show him a dependant textbox.

Reload the page is not a solution for me.

Please, gentleman, show me how can I do that! :D
Yes, It Is!
0

#2 User is offline   imehesz 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 701
  • Joined: 13-June 09
  • Location:Jacksonville, FL

Posted 12 August 2009 - 08:24 AM

View Postrickgrana, on 12 August 2009 - 08:15 AM, said:

I am asking this because I don't have so much knowledge about jQuery.

My form have a dropdownList with Yes/No options. If user select 'Yes', my form must show him a dependant textbox.

Reload the page is not a solution for me.

Please, gentleman, show me how can I do that! :D


well, there are multiple ways to do it. I'd just add something like this to my drop-down element.
<?= CHtml::formFieldType($model, 'fieldName', array( 'onChange' => 'javascript:yourExternalJsFunction()' ) ); ?>


and your 'yourExternalJsFunction' would display or generate your next drop-down,text,checkbox, etc field...

hope this helps.

--iM
It’s done, the great act of creation.
The maker rests. The wheel’s in motion.
-- Imre Madách

check out Yii Theme Factory at http://yii.themefactory.net
0

#3 User is offline   ricardograna 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 375
  • Joined: 31-March 09
  • Location:Manaus/AM - Brazil

Posted 12 August 2009 - 09:39 AM

Sorry, my topic is in the wrong place (Can some admin move this topic to General Discussion? Thx!)

imehez, thanks for your response. But, I was expecting something in jQuery mode. jQuery has something like js:$('mydiv').toggle()?
Yes, It Is!
0

#4 User is offline   fduch 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 23
  • Joined: 10-April 09

Posted 12 August 2009 - 09:54 AM

View Postrickgrana, on 12 August 2009 - 09:39 AM, said:

Sorry, my topic is in the wrong place (Can some admin move this topic to General Discussion? Thx!)

imehez, thanks for your response. But, I was expecting something in jQuery mode. jQuery has something like js:$('mydiv').toggle()?


Yep (you should change selectors #mydiv and #dropdownlist to yours)
$(document).ready(function(){
  var droplist = $('#dropdownlist');
  droplist.change(function(e){
    if (droplist.val() == 'Yes') {
      $('#mydiv').show();
    }
    else {
      $('#mydiv').hide();
    }
  })
});


or this code can be simpler if initial option is "No":
$(document).ready(function(){
  var droplist = $('#dropdownlist');
  droplist.change(function(e){
    $('#mydiv').toggle();
  })
});


BTW. "best practice" to choose from 2 options (yes/no true/false) is checkbox.
2

#5 User is offline   ricardograna 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 375
  • Joined: 31-March 09
  • Location:Manaus/AM - Brazil

Posted 12 August 2009 - 10:32 AM

I knew it!! Thank you fduch!! ^^

Last question: Where should I put these codes? Inside a <script> tag on my form?

Edit: SOLVED!!! It is working like a charm!!
Yes, It Is!
0

#6 User is offline   fduch 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 23
  • Joined: 10-April 09

Posted 12 August 2009 - 12:02 PM

View Postrickgrana, on 12 August 2009 - 10:32 AM, said:

I knew it!! Thank you fduch!! ^^

Last question: Where should I put these codes? Inside a <script> tag on my form?

Anywhere at your page between <script></script> tags. Do not forget to change selectors! :)
0

#7 User is offline   auxbuss 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 164
  • Joined: 14-July 09
  • Location:Malvern, UK

Posted 13 August 2009 - 09:08 AM

Example with jQuery and Yii

<?= CHtml::checkBox('blah', false,
	array('id' => 'someid', 'onchange' => 'javascript:$("#someid").toggle()'
) ); ?>

1

#8 User is offline   ricardograna 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 375
  • Joined: 31-March 09
  • Location:Manaus/AM - Brazil

Posted 13 August 2009 - 09:46 PM

Great!

Unfortunately, I had to use pure javascript (to avoid jQuery charge and reduce traffic). But, i will have to use it some time.
Yes, It Is!
0

#9 User is offline   DarkNSF 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 287
  • Joined: 12-November 08
  • Location:Palm Bay, Florida

Posted 30 November 2009 - 03:59 PM

this is what i get, which does not work:

<?php echo CHtml::radioButtonList('userType', 'id', array('Existing', 'New User'), array('onchange'=>'javascript:$("#userTypeForm").toggle();')); ?>


which produces

 <input onchange="javascript:$(&quot;#userTypeForm&quot;).toggle();" value="0" id="userType_0" type="radio" name="userType" />



is there any way to stop it from: turning " in to &quot;?
0

#10 User is offline   PoL 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 506
  • Joined: 05-November 08
  • Location:Buenos Aires, Argentina

Posted 01 December 2009 - 06:48 AM

If i'm not wroong you must ise this way:
<?php echo CHtml::radioButtonList('userType', 'id', array('Existing', 'New User'), array('onchange'=>'js:$("#userTypeForm").toggle();')); ?>


Note the use of 'js' against 'javascript'.
Don't say what you think, think what you say
The problem is communication! Excess of communication!
0

#11 User is offline   DarkNSF 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 287
  • Joined: 12-November 08
  • Location:Palm Bay, Florida

Posted 01 December 2009 - 12:50 PM

View PostPoL, on 01 December 2009 - 06:48 AM, said:

If i'm not wroong you must ise this way:
<?php echo CHtml::radioButtonList('userType', 'id', array('Existing', 'New User'), array('onchange'=>'js:$("#userTypeForm").toggle();')); ?>


Note the use of 'js' against 'javascript'.



Thanks PoL, I'll give it a shot when I get home from work.
0

#12 User is offline   kiran sharma 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 492
  • Joined: 21-May 11
  • Location:India

Posted 06 June 2011 - 07:05 AM

I use display element on dropdown selection ,
I want to display another dropdown on selection of first one and I use following code .


step : 1 => code for view file

<div class="row">                                              //   first dropdown for selection
		<?php echo $form->labelEx($model,'E_ROLE'); ?>
		<?php echo $form->dropDownList($model,'E_ROLE',array(""=>"Select","Admin"=>"Admin","Employee"=>"Employee","TL"=>"TL"),array('onchange'=>'return muFun(this.value)')); ?>
		<?php echo $form->error($model,'E_ROLE'); ?>
	</div>
    
    
    <div id="TLID_DIV" style="display:none">                  //   hidden dropdown enable on selection first one
   		<div class="row">
		<?php echo $form->labelEx($model,'E_TLID'); ?>
	       <?php echo CHtml::activeDropDownList($model,'E_TLID', $model->getTL() , array('prompt'=>'Select') ); ?>
		<?php echo $form->error($model,'E_TLID'); ?>
		</div>    
    </div>



step : 2 => code for js

function muFun(obj){
		if(obj=="Employee"){
		document.getElementById('TLID_DIV').style.display="block"; 
		return false;
		}else{
		document.getElementById('TLID_DIV').style.display="none"; 
		return false;
		}
	}

Thanks,
Kiran Sharma.
0

#13 User is offline   Maurizio Domba Cerin 

  • Yii - Yesss It Is !!!
  • Yii
  • Group: Yii Dev Team
  • Posts: 4,336
  • Joined: 12-October 09
  • Location:Croatia

Posted 06 June 2011 - 07:58 AM

@Kiran Sharma

when posting code you can use the code button (<> on the editor toolbar)... so that your code is more readable... or use [ code] your code [ /code] directives (without spaces)

NOTE: you can edit your posts to add this codes...
Find more about me.... btw. Do you know your WAN IP?
0

#14 User is offline   kiran sharma 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 492
  • Joined: 21-May 11
  • Location:India

Posted 21 June 2011 - 11:52 AM

@mdomba , thankx.
Thanks,
Kiran Sharma.
0

#15 User is offline   hav 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 9
  • Joined: 21-October 10

Posted 23 July 2012 - 02:12 PM

View Postimehesz, on 12 August 2009 - 08:24 AM, said:

well, there are multiple ways to do it. I'd just add something like this to my drop-down element.
<?= CHtml::formFieldType($model, 'fieldName', array( 'onChange' => 'javascript:yourExternalJsFunction()' ) ); ?>


and your 'yourExternalJsFunction' would display or generate your next drop-down,text,checkbox, etc field...

hope this helps.

--iM


Sorry my English. I'm starting at Yii and I understand very little of js, I wonder if you have the rest of this solution. Missing yourExternalJsFunction how about it?
0

#16 User is offline   conviera 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 2
  • Joined: 19-November 12

Posted 19 November 2012 - 10:14 AM

View Postkiran sharma, on 06 June 2011 - 07:05 AM, said:

I use display element on dropdown selection ,
I want to display another dropdown on selection of first one and I use following code .


step : 1 => code for view file

<div class="row">                                              //   first dropdown for selection
		<?php echo $form->labelEx($model,'E_ROLE'); ?>
		<?php echo $form->dropDownList($model,'E_ROLE',array(""=>"Select","Admin"=>"Admin","Employee"=>"Employee","TL"=>"TL"),array('onchange'=>'return muFun(this.value)')); ?>
		<?php echo $form->error($model,'E_ROLE'); ?>
	</div>
    
    
    <div id="TLID_DIV" style="display:none">                  //   hidden dropdown enable on selection first one
   		<div class="row">
		<?php echo $form->labelEx($model,'E_TLID'); ?>
		   <?php echo CHtml::activeDropDownList($model,'E_TLID', $model->getTL() , array('prompt'=>'Select') ); ?>
		<?php echo $form->error($model,'E_TLID'); ?>
		</div>    
    </div>



step : 2 => code for js

function muFun(obj){
		if(obj=="Employee"){
		document.getElementById('TLID_DIV').style.display="block"; 
		return false;
		}else{
		document.getElementById('TLID_DIV').style.display="none"; 
		return false;
		}
	}



It works 100%
If helpful give user rating to my profile.




Hi All,
I am a newbie to yii and trying to hide and show form elements based on selection of an option from another field.

My form has a dropDownList with "-/Low/High " and I want to display a low field if low is selected, or a high field if high is selected.

This is my form

<td id="riskDropDownList">
<?php echo $form->labelEx($model,'patient_risk'); ?>
<?php echo ZHtml::enumDropDownList($model,'patient_risk',array('style'=>'width:262px;',)); ?>
<?php echo $form->error($model,'patient_risk'); ?>
</td>


<td class="lowRiskField">
<?php echo $form->labelEx($model,'if_risk_low_risk_factor'); ?>
<?php echo $form->dropDownList($model,'if_risk_low_risk_factor', $model->riskFactorArray()); ?>
<?php echo $form->error($model,'if_risk_low_risk_factor'); ?>
</td>

<td class="highRiskField">
<?php echo $form->labelEx($model,'if_risk_high_risk_factor'); ?>
<?php echo $form->dropDownList($model,'if_risk_high_risk_factor',$model->riskFactorArray()); ?>
<?php echo $form->error($model,'if_risk_high_risk_factor'); ?>
</td>

and this is my JQuery script

<script type="text/javascript">
$(document).ready(function(){

$("#riskDropDownList").change(function() {
if ($("#riskDropDownList").val() == 'Low')
{
$(".lowRiskField").show();
}

else if ($("#riskDropDownList").val() == 'High')
{
$(".highRiskField").show();
}
else
{
$(".lowRiskField").hide();
$(".highRiskField").hide();
}

});

$("#riskDropDownList").change();

});
</script>

Many thanks for your help in advance
0

#17 User is offline   kiran sharma 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 492
  • Joined: 21-May 11
  • Location:India

Posted 19 November 2012 - 01:27 PM

@converia,
yes the code looks fine,
why you had use $("#riskDropDownList").change() at the end of script..?

/*
This topic should be in proper section, I think its not related to Bug Discussion
Topic started before much time so i think current staff hasn't point out - which is quite obvious :)
*/
Thanks,
Kiran Sharma.
0

#18 User is offline   auren27 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 44
  • Joined: 06-February 13

Posted 12 July 2013 - 05:43 AM

View Postkiran sharma, on 06 June 2011 - 07:05 AM, said:

I use display element on dropdown selection ,
I want to display another dropdown on selection of first one and I use following code .


step : 1 => code for view file

<div class="row">                                              //   first dropdown for selection
		<?php echo $form->labelEx($model,'E_ROLE'); ?>
		<?php echo $form->dropDownList($model,'E_ROLE',array(""=>"Select","Admin"=>"Admin","Employee"=>"Employee","TL"=>"TL"),array('onchange'=>'return muFun(this.value)')); ?>
		<?php echo $form->error($model,'E_ROLE'); ?>
	</div>
    
    
    <div id="TLID_DIV" style="display:none">                  //   hidden dropdown enable on selection first one
   		<div class="row">
		<?php echo $form->labelEx($model,'E_TLID'); ?>
	       <?php echo CHtml::activeDropDownList($model,'E_TLID', $model->getTL() , array('prompt'=>'Select') ); ?>
		<?php echo $form->error($model,'E_TLID'); ?>
		</div>    
    </div>



step : 2 => code for js

function muFun(obj){
		if(obj=="Employee"){
		document.getElementById('TLID_DIV').style.display="block"; 
		return false;
		}else{
		document.getElementById('TLID_DIV').style.display="none"; 
		return false;
		}
	}



This is a great way of doing it.

I am trying to achieve something similar but with checkboxes and I am using Bootstrap toggleButtonRow widgets. The toggleButtonRow field just adds

checked="checked"


to the code when it is clicked. Does anyone know how to do a show/hide div with this kind of thing?

Many thanks
0

#19 User is offline   vivek_yii 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 3
  • Joined: 04-August 13

Posted 04 August 2013 - 09:29 AM

View Postkiran sharma, on 06 June 2011 - 07:05 AM, said:

I use display element on dropdown selection ,
I want to display another dropdown on selection of first one and I use following code .


step : 1 => code for view file

<div class="row">                                              //   first dropdown for selection
		<?php echo $form->labelEx($model,'E_ROLE'); ?>
		<?php echo $form->dropDownList($model,'E_ROLE',array(""=>"Select","Admin"=>"Admin","Employee"=>"Employee","TL"=>"TL"),array('onchange'=>'return muFun(this.value)')); ?>
		<?php echo $form->error($model,'E_ROLE'); ?>
	</div>
    
    
    <div id="TLID_DIV" style="display:none">                  //   hidden dropdown enable on selection first one
   		<div class="row">
		<?php echo $form->labelEx($model,'E_TLID'); ?>
	       <?php echo CHtml::activeDropDownList($model,'E_TLID', $model->getTL() , array('prompt'=>'Select') ); ?>
		<?php echo $form->error($model,'E_TLID'); ?>
		</div>    
    </div>



step : 2 => code for js

function muFun(obj){
		if(obj=="Employee"){
		document.getElementById('TLID_DIV').style.display="block"; 
		return false;
		}else{
		document.getElementById('TLID_DIV').style.display="none"; 
		return false;
		}
	}


Problem solve Thanks Sharma ji
0

#20 User is offline   Larry Jr. 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 16
  • Joined: 13-March 13
  • Location:Tomohon

Posted 18 October 2013 - 04:48 AM

View Postfduch, on 12 August 2009 - 09:54 AM, said:

Yep (you should change selectors #mydiv and #dropdownlist to yours)
$(document).ready(function(){
  var droplist = $('#dropdownlist');
  droplist.change(function(e){
    if (droplist.val() == 'Yes') {
      $('#mydiv').show();
    }
    else {
      $('#mydiv').hide();
    }
  })
});


or this code can be simpler if initial option is "No":
$(document).ready(function(){
  var droplist = $('#dropdownlist');
  droplist.change(function(e){
    $('#mydiv').toggle();
  })
});


BTW. "best practice" to choose from 2 options (yes/no true/false) is checkbox.


Hi fduch,
Similar question, where exactly I put this code? is it in my view? I can't find any script tag in my view. Thanks for the explanation.

I have a checkbox:
<?php echo $form->checkBox($model, 'tbo_sk'); ?>


and a text field:
<?php echo $form->textField($model, 'nilaiblksk'); ?>


----------------

Solved, thanks fduch.
So for the checkbox I did similarly to the js file like this:
$(document).ready(function(){
    $('#Dcl_tbo_sk').change(function(){ // where Dcl_tbo_sk is my model & table (model_table)
        $('#hiddenDiv').toggle(); // hiddenDiv replace our Dcl_nilaiblksk as model & table (model_table)
    }); 
});


Then my view for checkBox & textField becomes:
<?php echo $form->checkBox($model, 'tbo_sk'); ?>
<div id="hiddenDiv" style="display: none"<?php echo $form->textField($model, 'nilaiblksk'); ?></div>


That will do

This post has been edited by Larry Jr.: 21 October 2013 - 08:27 PM

JoenMarz
0

Share this topic:


  • (2 Pages)
  • +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users