Bootstrap Modal 在 GridView、Yii2 中不支持 Pjax

Question

我是 Yii 的新手，我发现了类似的问题，但仍然无法解决我的问题。我在 index 页面上有一个 GridView，每行都有 view 按钮。我在 bootstrap Modal:

中展示这些视图

 <?php
        Modal::begin([
            'header' => Yii::t('app','Feedback'),
            'id' => 'feedbackModalId',
            'class' =>'modal',
            'size' => 'modal-md',
        ]);       
        echo "<div class='modalContent'></div>";

        Modal::end();

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

echo GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
        //...

        ['class' => 'yii\grid\ActionColumn', 'template'=>'{custom_view}{custom_update}',
            'buttons' => 
            [
                'custom_view' => function ($url, $model) {
                   return
                           Html::a(Yii::t('app','View'), ['view', 'id'=>$model->id],['class' => 'btn-xs btn-primary modalButton'] );

                },     
               'custom_update' => function ($url, $model) {                
                            return                          
                                Html::a(Yii::t('app','Update'), ['update', 'id'=>$model->id],['class' => 'btn-xs btn-primary modalButton'] );

                    },  

            ]
        ]
    ],
]); 
Pjax::end();?>

模式触发：

    $(".modalButton").click(function(){      
       $(".modal").modal("show")
                  .find(".modalContent")
                  .load($(this).attr('href'));
       return false;   
   });

在我为 ajax 搜索和分页添加 Pjax 之前它工作正常，但现在当我单击 view 按钮时，我看到页面上呈现的视图而不是弹出窗口。我找到了一个将 data-pjax = 1 添加到表单属性的解决方案，但就我而言，我没有 post 表单。

如有任何建议，我将不胜感激。

Answer 1

使用以下代码代替 Pjax 的 js 代码

模态代码

<?php
    yii\bootstrap\Modal::begin([
        'header' => 'demo Test',
        'id'=>'feedbackModalId',
    ]);
    yii\bootstrap\Modal::end();
?>

<?php  //js code: 

$this->registerJs(
"$(document).on('ready pjax:success', function() {
        $('.modalButton').click(function(e){
           e.preventDefault(); //for prevent default behavior of <a> tag.
           var tagname = $(this)[0].tagName;      
           $('#feedbackModalId').modal('show')
                      .find('.modalContent')
                      .load($(this).attr('href'));  
       });
    });
")
?>

<?php Pjax::begin(); 

echo GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
        //...

        ['class' => 'yii\grid\ActionColumn', 'template'=>'{custom_view}',
            'buttons' => 
            [
                'custom_view' => function ($url, $model) {
                   return Html::a(Yii::t('app','View'), ['view', 'id'=>$model->id],['class' => 'btn-xs btn-primary modalButton'] );

                },                    

            ]
        ]
    ],
]); 
Pjax::end();?>

希望对你有帮助。

Bootstrap Modal 在 GridView、Yii2 中不支持 Pjax

Bootstrap Modal not working with Pjax in GridView, Yii2

jquery

bootstrap-modal

yii2

yii2-advanced-app