Filter not work if 2 CGridViews on one page

I’m using tab widgets of jQueryUI. Each tab contains a CGridview table with its own filter. One of the tabs fetches its content via Ajax.

Controller:


public function actionIndex()

{

	$model=new Admin('search');

	$model->unsetAttributes();

	if(isset($_GET['Admin']))

		$model->attributes=$_GET['Admin'];

	

	$this->render('index',array('model'=>$model));

}

	

public function actionPartners()

{

	$model=new Partner('search');

	$model->unsetAttributes();

	if(isset($_GET['Partner']))

		$model->attributes=$_GET['Partner'];

	

	$this->renderPartial('partners',array('model'=>$model));//render contents for tab-2

}

View of index:


<ul>

	<li><a href="#admin_tab_admins">Admins</a></li>

	<li><a href="admin/partners.html" title="partners">Partners</a></li> //get contents of tab-2 via ajax

</ul> //here will generate 2 tabs


//contents for tab-1

<div id="admin_tab_admins">

	<?php

		$this->widget('zii.widgets.grid.CGridView', array(

			'dataProvider'=>$model->search(),

			'filter'=>$model,

			'id'=>'admin_table',

			'columns'=>array(

				array(

					'header'=>'ID',

					'name'=>'adminID',

				),

				array(

					'header'=>'Username',

					'name'=>'userName',

				),

				...

			)

		));

	?>

</div>

View of partner:


<?php

	$this->widget('zii.widgets.grid.CGridView', array(

		'dataProvider'=>$model->search(),

		'filter'=>$model,

		'id'=>'partner_table',

		'columns'=>array(

			array(

				'header'=>'ID',

				'name'=>'partnerID',

			),

			array(

				'header'=>'Partner Name',

				'name'=>'partnerName',

			),

			...

		)

	));

?>

After getting the CGridView of tab-2 via ajax, there are 2 CGridView on the same page. The filter of tab-2’s CGridView will not work.

This thread does not solve my problem because I have set different ID for each CGridView, and I use different model.

I think the problem is that the CGridView filter of tab-2 post data to filter of tab-1’s url. I found the following js code, which is generated by tab-1’s CGridView:


jQuery('#admin_table').yiiGridView({'ajaxUpdate':['admin_table'],'ajaxVar':'ajax','pagerClass':'pager','loadingClass':'grid-view-loading','filterClass':'filters','tableClass':'items','selectableRows':1,'pageVar':'Admin_page'});

However, no js code was found for tab-2’s CGridView, which is shown via ajax.

Any ideas?

This post tell me to change


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

to


$this->renderPartial('partners',array('model'=>$model), false, true);

Now tab-2’s filter works. Unfortunately, when I switched back to tab-1, the filter of tab-1 didn’t work. This time I think it is because the data was posted to tab-2’s action.

Any good solution?

Hi,

CGridView IDs (admin_table) should not be the same

Thanks, still not work

(IIRC) The main problem here is probably that the grid js event handlers will be overwritten because the grid code doesn’t know about which id’s where already generated on initial load. Loading jQuery itself a second time may also create problems (but you can exlude jQuery from scriptMap before renderrPartial). Again, IIRC. There’s a plenty of existing discussions in this forum, on similar topics.

I’m thinking of a solution where you load both grids into the page initially (then just update the second one in order to populate it). Absolutely untested, though.

/Tommy

I want to use Ajax to load the 2nd & 3rd tabs’s content. Is it possible to overwrite the grid js event handlers by myself when I switch tabs? How to?

Better solution will be appreciated.