Nested Pjax not work with Gridview sort link

Dear all,

I had a trouble with Pjax.

There are two Pjax container in my website.

<?php Pjax::begin(['id' => 'main_pjax', 'timeout' => '5000']);  // Parent Pjax containter?>



<?php Pjax::begin([

    'id' => 'part_gridview_pjax',

    'enablePushState' => true, 

    'clientOptions' => [

        'skipOuterContainers' => true,


    'options' => [

        'container' => '#part_gridview'


]);  // Child Pjax containter ?>

    <?= GridView::widget([

        'id' => 'part_gridview',

        'dataProvider' => $dataProvider,

        'filterModel' => $searchModel,

        'columns' => [

            ['class' => 'yii\grid\SerialColumn'],






            ['class' => 'yii\grid\ActionColumn'],


    ]); ?>

<?php Pjax::end()?>



<?php Pjax::end();?>

My problem is, when the Child pjax container is loaded (with pjax, not full reload), when I click to the sort link on the table header, the table content is not updated.

Chrome dev tool show in network panel, there is XHR request is called for this sort link, the response is ok. But the table content is not updated with new content which is responsed from XHR request.

Please help me to solve that, thank you so much.

Maybe is parent pjax to handle the request?

See my comment about this as well as others to get this to work.

I came up with this workaround because i can’t get the other stuff to work

jQuery(document).on('click', 'table thead *[data-sort]', function (e) {



        url: jQuery(this).attr('href'),

        type: 'GET',

        success: function (data) {





You can also use this for straight ajax loaded content. Just change the selectors.

Thank Skworden, I had solved my problem with your recommendation.

I think Pjax’s idea is very good, by it needs to be improved more.