Pjax GridView inside a jQuery accordion

Yii 2.0 General Discussions
1

I have a view with a dynamically loaded jQuery UI accordion, so the the content property of one of the accordion items looks like this:




'content' => '<div data-url=.$myUrl.'>loading...</div>',

The activate clientEvent references a JS called fillPanel to handle the event:




function fillPanel(event, ui) {

	var kids = $(ui.newPanel[0]).children('div');

	$(kids).each (function (index, element) {

		$url = $(element).attr('data-url');

		$.getJSON($url, function (data) {

			$(element).html(data);

		});

	});

}

data-url ($myUrl in this case) points to a controller action that builds a GridView:




	public function actionSummaryJson($id)

	{

		$query = // query specifics

		$dataProvider = new ActiveDataProvider([

				'query' => $query,

		]);

		echo Json::encode($this->renderAjax('_summary', ['dataProvider' => $dataProvider]));

	}

The _summary.php view partial looks like this:




<?php

use kartik\grid\GridView;

use yii\helpers\Html;

use yii\widgets\Pjax;

?>


<div id="special-projects">


<?php

Pjax::begin(['enablePushState' => false]);

echo  GridView::widget([

		'dataProvider' => $dataProvider,

// ..other GridView configuration stuff

]);

?>


</div>


<?php

Pjax::end();

Everything works as expected on the initial build , i.e., when the accordion panel is activated the grid is displayed in the panel. However, when the page numbers are clicked, the refreshed grid overlays the entire accordion. How can I force the subsequent Pjax actions to refresh inside the panel of the accordion instead of overlaying the entire accordion?

Mahalo in advance.

Joe

2

OK, I found an answer on the Krajee site, so I may have missed it in the documentation. You need to include identical id properties in the Pjax::begin() and the GridView widget.




<?php

Pjax::begin(['id' => 'active-projects', 'enablePushState' => false]);

echo  GridView::widget([

		'id' => 'active-projects',

// etc.

Worked for me. Hope it will help others.