Javascript not working inside CJuiTabs

Yii 1.1 General Discussion
1

I have a setup something like this:




<?php 

$form=$this->beginWidget('CActiveForm', array('id'=>'my-form', 'enableAjaxValidation'=>false,)); ?>

$this->widget('zii.widgets.jui.CJuiTabs', array(

    'tabs'=>array(

        'Properties'=>array('ajax'=>$this->createUrl('/myController/properties')),

        'Names'=>array('ajax'=>$this->createUrl('/myController/names')),

     ),

    'options'=>array(

        'collapsible'=>false,

    ),

)); ?>

<?php 

 Yii::app()->clientScript->registerScript('search',

 "$('#MyModelProperties_country_id').change(function(){alert($('#MyModelProperties_country_id').val())});");

 ?>   

    

<?php $this->endWidget(); ?>

In myController/properties I have


public function actionProperties{

            $model = new MyModel;

            $this->renderPartial('_properties', array('model'=>$model,));

}

And in _properties.php


<?php echo CHtml::dropDownList('MyModelProperties[country_id]', '', $countrySelect, array('empty'=>'(Select country)', )); ?>

Originally, I wanted to write a dependent dropdown, but the first one never submitted a server request, so I tried to simplify my code as much as possible to catch the error. I could not.

A couple of things to note: I tried to put the


Yii::app()->clientScript->registerScript('')

inside the CJuiTabs, before the CJuiTabs or after the CJuiTabs, it did not matter; however, if I put the whole select outside the CJuiTabs my JS script works just fine. I also tried to write the script inside plain


<script type="text/javascript"></script>

tags, but the behavior was similar. It’s also worth noting, that if I view the source of the displayed page in my browser, the JS is there, it just doesn’t work if the select is inside the CJuiTab.

Is this some kind of bug, or am I missing something? Please advise!

2

Hi, damnated

I think the problem is because you are giving the tab contents by AJAX.

“$(’#MyModelProperties_country_id’).change()” needs the element with the id already present when the script is loaded, but the element is not yet there because the tab contents is supplied by AJAX.

So, try something like the following just for testing.




$this->widget('zii.widgets.jui.CJuiTabs', array(

    'tabs'=>array(

        'Properties'=>$this->renderPartial('_properties', array('model'=>$model,), true),

        'Names'=>$this->renderPartial('_names', array('model'=>$model,), true),

     ),

    'options'=>array(

        'collapsible'=>false,

    ),

));

Or, though I’ve never tested it yet, “jQuery.on()” may work. Try the following …




Yii::app()->clientScript->registerScript('search',

 "$('body').on('change', '#MyModelProperties_country_id', function(){alert($('#MyModelProperties_country_id').val())});");
3

I suspected this was the problem, but renderPartial put the form outside of the tabs.

The extra ‘true’ parameter did the trick this time though.

Thank you!

4

Hi,

I am having a similar issue where i have 4 tabs all render form elements from different models. I have submit button in my tabs view. below is the code which renders forms:

<?php $form=$this->beginWidget(‘CActiveForm’, array(

'id'=&gt;'default-parent-form',


'enableAjaxValidation'=&gt;false,


'htmlOptions' =&gt; array('enctype' =&gt; 'multipart/form-data'),

)); ?>

&lt;?php


	&#036;tabs = array();


	


	&#036;tabs['Agent Details'] = array(


			'id'=&gt;'dataAgentTab',


			'content'=&gt;&#036;this-&gt;renderPartial('_formAgentFields', array(


					'form' =&gt; &#036;form,


					'agent_model'=&gt;&#036;agent_model,


			),


			true),


	);


	


	&#036;tabs['Users'] = array(


			'id'=&gt;'dataUserTab',


			'content'=&gt;&#036;this-&gt;renderPartial('_formUserFields', array(


					'form' =&gt; &#036;form,


					'user_model'=&gt;&#036;user_model,


			),


					true),


	);


	


	&#036;tabs['Bank Details'] = array(


			'id'=&gt;'dataBankTab',


			'content'=&gt;&#036;this-&gt;renderPartial('_formBankFields', array(


					'form' =&gt; &#036;form,


					'bank_model'=&gt;&#036;bank_model,


			),


			true),


	);


	


	&#036;tabs['Travel Association'] = array(


			'id'=&gt;'dataTravelTab',


			'content'=&gt;&#036;this-&gt;renderPartial('_formTravelFields', array(


					'form' =&gt; &#036;form,


					'travel_model'=&gt;&#036;travel_model,


			),


					true),


	);


	


	&#036;this-&gt;widget('zii.widgets.jui.CJuiTabs', array(


			'tabs' =&gt; &#036;tabs,


			'options' =&gt; array(


					'collapsible' =&gt; false,


			),


	));


?&gt;


&lt;div class=&quot;row buttons&quot;&gt;


	&lt;?php echo CHtml::submitButton(&#036;agent_model-&gt;isNewRecord ? 'Create' : 'Save'); ?&gt;


&lt;/div&gt;

<?php $this->endWidget(); ?>

All respective models define rules(). When i submit form only fields from first tab ie AgentNew gets validated. Fields from other tabs dont get validated. Pl help.