Zii CJuiTabs

Currently replacing some CTabViews with the Zii CJuiTabs. Obviously there are some differences, but one thing seems quite hard to accomplish, tabs in tabs.

In the main CJuiTabs view I call another view (ajax), that view contains a CJuiTabs too. I defined another id and an id-Prefix. But for one reason or another sometimes it generates the second tab bar (without functioning), sometimes it just generates the content of the first tab, without the bar.

Perhaps I missed something. Anyone tried it before?

One other question: CTabViews gave the tabbed content in a named, unique div. That was quite handy for use with Ajax content replacement. CJuiTabs have auto-generated div id’s (Jquery UI does this). This makes it harder to replace the contents of the tab with Ajax. Anyone has a solution for this, without adding an additional view?

Could you send the code to test the it?

Thanks.

This is the first tabsequence view:




  <?php

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

		'tabs'=>array(

		'Main info'=>array('ajax'=>array('/property/admin/property/update','id'=>$model->id)),

		'Descriptions'=>array('ajax'=>array('/property/admin/propertytext/tabs','id'=>$model->id)), // Second tabsequence

		...

		),

		// additional javascript options for the tabs plugin

		'options'=>array(

			'collapsible'=>true,

		),

	));

?>

The Descriptions tabsequence (outputted with renderPartial) view looks like this:




	$tabs['English'] = array('ajax'=>'/path/to/action',);

	$tabs['Spanish'] = array('ajax'=>'/path/to/action',);

        ...


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

		'tabs'=>$tabs,

		'id'=>'yw1',

		// additional javascript options for the tabs plugin

		'options'=>array(

			'collapsible'=>false,

			'id-Prefix'=>'ui-tabs-2-',

		),

	));



At times it generates the second tab, but is not functional. At times it gives the first tab, and the head tab is replaced sometimes. I can see the id is used (#yw1), but not the id-Prefix.

I replaced the second tabsequence with ajaxLinks, to make sure it is not due to one of the elements in the called view, but with links it works flawlessly.

About the other issue, perhaps I can use contentTemplate to define a div to update with Ajax, but not sure yet how to use it…

For the issue of updating a CJuiTab panel with Ajax, I currently use ‘success’ instead of ‘replace’. This works. The trick is to refer to the parent of your own div.




	$ajax =

	  array(

		'type'=>'POST',

			'success' => 'function(html){

				$("#opencalendar").parent().html(html);

			}',		  

			'beforeSend' => 'function(){

				$("#opencalendar").addClass("loading");

			}',

			'complete' => 'function(){

				$("#opencalendar").removeClass("loading");

			}',);

	echo CHtml::ajaxSubmitButton('Save',array('opencalendar','id'=>$data->id), $ajax, array('name'=>'opencal'));