yii2 -> Modal Dialog on Gridview's update button does not work after searching or change pagination on gridview

Question

Reference to Yii2 Modal Dialog on Gridview view and update button shows same content for both buttons and How to implement Yii2 Modal Dialog on Gridview view and update button?

I got modal dialog from clicking update button on gridview with correct ID parameter from selected row. But when i used searching and pagination on gridview the problem occurred. The modal dialog seem not working anymore the modal dialog will be shown from clicking update button but the ID parameter does not match the selected row. To be honest, it seem gridview does not know the registerJS anymore. Can anyone kindly advise how to solve the problem?

  <?php
$gridColumns = [
       [
            //'class' => 'kartik\grid\EditableColumn',
           'attribute' => 'branch_id',
           'pageSummary' => true,
       ],
       [
        'class' => 'kartik\grid\ActionColumn',
        'template' => '{update} {delete}',
        'headerOptions' => ['width' => '20%', 'class' => 'activity-view-link',],
        'contentOptions' => ['class' => 'padding-left-5px'],

        'buttons' => [
            'update' => function ($url, $model, $key) {
                return Html::a('<span class="glyphicon glyphicon-star-empty"></span>','/branches/update?id='.$key.'', [
                    'class' => 'activity-view-link',
                    'title' => Yii::t('yii', 'Update'),
                    'data-toggle' => 'modal',
                    'data-target' => '#activity-modal',
                    'data-id' => $key,
                    'data-pjax' => '0',

                ]);
            },
        ],


    ],
];?>

<?php Pjax::begin(); ?>
<?php
echo GridView::widget([

    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => $gridColumns,
    // 'containerOptions' => ['style'=>'overflow: auto'], // only set when $responsive = false
    'headerRowOptions'=>['class'=>'kartik-sheet-style'],
    'filterRowOptions'=>['class'=>'kartik-sheet-style'],
    'pjax' => true, // pjax is set to always true for this demo
    'pjaxSettings'=>[
        'neverTimeout'=>true,
        'beforeGrid'=>'Branches Data',
        'afterGrid'=>'My fancy content after.',
        'enablePushState' => false,
        'options' => ['id' => 'BranchesGrid'],
    ],
    'bordered' => true,
    'striped' => true,
    'condensed' => true,
    'responsive' => true,
    'hover' => true,
    'floatHeader' => true,
    'panel' => [
        'type' => GridView::TYPE_PRIMARY
    ],
]);
?>
<?php yii\widgets\Pjax::end() ?>

<?php $this->registerJs(
'
$(".activity-view-link").click(function(e) {
            var fID = $(this).closest("tr").data("key");
            $.get(
                "update",
                {
                    id: fID
                },
                function (data)
                {
                    $("#activity-modal").find(".modal-body").html(data);
                    $(".modal-body").html(data);
                    $("#activity-modal").modal("show");
                }
            );
        });

'

); ?>

<?php Modal::begin([
'id' => 'activity-modal',
'header' => '<h4 class="modal-title">Branches Updatez</h4>',
'size'=>'modal-lg',
'footer' => '<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>',

]); ?>

Answer 1

This happenes because you bind click event handler in your JS to elements that already rendered. So this handler affects only on elements on first page. And after any ajax update those elements disapear. You need to reactivate your click handler after each pjax update.

<?php Pjax::begin(['id'=>'some_pjax_id']); ?>
<?php
echo GridView::widget([

    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => $gridColumns,
    // 'containerOptions' => ['style'=>'overflow: auto'], // only set when $responsive = false
    'headerRowOptions'=>['class'=>'kartik-sheet-style'],
    'filterRowOptions'=>['class'=>'kartik-sheet-style'],
    'pjax' => true, // pjax is set to always true for this demo
    'pjaxSettings'=>[
        'neverTimeout'=>true,
        'beforeGrid'=>'Branches Data',
        'afterGrid'=>'My fancy content after.',
        'enablePushState' => false,
        'options' => ['id' => 'BranchesGrid'],
    ],
    'bordered' => true,
    'striped' => true,
    'condensed' => true,
    'responsive' => true,
    'hover' => true,
    'floatHeader' => true,
    'panel' => [
        'type' => GridView::TYPE_PRIMARY
    ],
]);
?>
<?php yii\widgets\Pjax::end() ?>

<?php $this->registerJs(
'
function init_click_handlers(){
  $(".activity-view-link").click(function(e) {
            var fID = $(this).closest("tr").data("key");
            $.get(
                "update",
                {
                    id: fID
                },
                function (data)
                {
                    $("#activity-modal").find(".modal-body").html(data);
                    $(".modal-body").html(data);
                    $("#activity-modal").modal("show");
                }
            );
        });

}

init_click_handlers(); //first run
$("#some_pjax_id").on("pjax:success", function() {
  init_click_handlers(); //reactivate links in grid after pjax update
});

');