yii2 -> Gridview 的更新按钮上的模态对话框在搜索或更改gridview 上的分页后不起作用

Question

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

我通过单击 gridview 上的更新按钮获得了模态对话框，其中包含来自所选行的正确 ID 参数。但是当我在gridview上使用搜索和分页时，问题就出现了。模态对话框似乎不再工作，模态对话框将通过单击更新按钮显示，但 ID 参数与所选行不匹配。老实说，gridview 似乎不再知道 registerJS 了。任何人都可以建议如何解决这个问题？

  <?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

发生这种情况是因为您将 JS 中的单击事件处理程序绑定到已呈现的元素。所以这个处理程序只影响第一页上的元素。在任何 ajax 更新之后，这些元素就会消失。您需要在每次 pjax 更新后重新激活您的点击处理程序。

<?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
});

');