Pjax GridView inside a jQuery accordion

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) {





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:


use kartik\grid\GridView;

use yii\helpers\Html;

use yii\widgets\Pjax;


<div id="special-projects">


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

echo  GridView::widget([

		'dataProvider' => $dataProvider,

// ..other GridView configuration stuff






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.


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.


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

echo  GridView::widget([

		'id' => 'active-projects',

// etc.

Worked for me. Hope it will help others.