首页 > 解决方案 > 模态中的 Yii2 Pjax Gridview 将重新加载页面而不是更新

问题描述

我在使用 Pjax 时遇到了问题,实际上在某个页面上,我在 Modal 中加载了一个视图,并且在这个模态中,我使用了带有过滤器选项的 GridView 和选择框。当用户更改过滤器时,内容不会更新,但页面将重定向到过滤后的 URL(更新数据的 Gridview)。

当视图在模式之外工作时,它工作正常,并更新其内容!

这是我的代码:

index.php,在这里我加载我的模态:

<div>

<?php
Modal::begin([
'header' => '',
'id' => 'modal-window',
'class' => 'modal',        
'footer' => '<a href="#" class="btn btn-warning" data-dismiss="modal">Close</a>',
    'clientOptions' => ['backdrop' => false]
]);

Modal::end();
?>
 

并认为:

<?php Pjax::begin(['id' => 'pjax_translation','enablePushState' => false, 'timeout' => false,]); ?>
<div class="row">
<h1><?= Html::encode($this->title) ?></h1>   
<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel'  => $searchModel,
    'filterUrl'    => Url::to(["translate/view" , "id" => $id ]),
    'tableOptions' => ['class' => 'table table-striped table-bordered translate-list',"style"=> ""],           
    'options' => ['data-pjax' => true ],
    'columns' => [
        [
            'attribute' => 'language',
            'filter' => $arrLanguage,
            'content'=>  function($model) use ($arrLanguage){
                return isset($arrLanguage[$model->language])? $arrLanguage[$model->language] : "" ;  
             },                
            'headerOptions' => ['width' => '150'],
        ],
        [
            
            'attribute' => 'translation',                
            
        ],                                                
    ],      
]); ?>
</div>
<?php Pjax::end(); ?>

在我的控制器中,代码是:

public function actionView($id)
{        
    $view = "view";
    
    $searchModel = new TranslateMessageSearch();
    
    $dataProvider = $searchModel->search(Yii::$app->request->queryParams);
    $dataProvider->query->andFilterWhere([
        'id' => $id,            
    ]);
    
    
     if (Yii::$app->request->isAjax) {            
        \Yii::$app->response->format = 'json';

        $html = $this->renderAjax($view, [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
            'id'=>$id,
        ]);
        
        return ['success' => true, 'html' => $html] ;
        
    } else {
        return $this->render($view, [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
            'id'=>$id,
        ]);
    } 
}

标签: phpgridviewyii2modal-dialogpjax

解决方案


这对我有用:

<?php Modal::begin([
    'header'        => '',
    'id'            => 'modal-window',
    'class'         => 'modal',        
    'toggleButton'  => ['label' => 'click me'],
    'footer'        => '<a href="#" class="btn btn-warning" data-dismiss="modal">Close</a>',
    'clientOptions' => ['backdrop' => false]
]); ?>

    <?php Pjax::begin() ?>
        <?php $form = ActiveForm::begin(['options' => ['data-pjax' => 1]]) ?>
            <?= date('Y-m-d H:i:s', time()) ?> <button type="submit">click this</button>
        <?php ActiveForm::end() ?>
    <?php Pjax::end() ?>

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

PS:也许你的页面被重新加载是因为你点击了Pjax 超时


推荐阅读