在 Yii2 中登顶数据后，Bootstrap Modal 弹出窗口消失了吗？

Question

我有一个模态弹出窗口，它在提交表单数据后消失，但是该模型旨在在同一视图上返回答案，它可以独立正常工作，但是它不像弹出窗口那样工作。提交数据后如何保留弹出窗口？我认为问题可能出在控制器上。谢谢。

mypopup 视图：

<div class="site-popup">
    <h1><?= Html::encode($this->title) ?></h1>

    <div class="row">
        <div class="col-lg-5">
            <?php $form = ActiveForm::begin(['id' => 'popup-form']); ?>
                <?= $form->field($model, 'pattern')->textArea(['rows' => 1]) ?>

                <div class="form-group">
                    <?= Html::submitButton('Submit', ['class' => 'btn btn-primary', 'name' => 'popup-button']) ?>
                </div>

            <?php ActiveForm::end(); ?>
        </div>
</div>

 <?php
    echo "<pre>";
    print_r($model->data); 
 ?>

这是调用 mypopup 的视图：

 <p>
    <?= Html::button('Search', ['value' =>Url::to('index.php?r=site/mypopup'),'class' =>'btn btn-success', 'id'=>'modalButton']) ?>
 </p>
        <?php
            Modal::begin([
            'header'=> '<h4>Search</h4>',  
            'id' => 'modal',
            'size' => 'modal-lg',
            ]);

            echo "<div id='modalContent'></div>";

            Modal::end();
       ?>

控制器：

public function actionPopup()
{

 $model = new PopupForm();

   if ($model->load(Yii::$app->request->post()) && $model->validate()) 
   {
      $model->insertPopup();
         return $this->renderAjax('mypopup', ['model' => $model]);

            } else {
                return $this->renderAjax('mypopup', [
                    'model' => $model,
                ]);
            } 
}

js文件：

$(function(){
    //get the click of the search button
    $('#modalButton').click(function(){
        $('#modal').modal('show')
            .find('#modalContent')
            .load($(this).attr('value'));
        }); 
});

Answer 1

尝试在你的视图中使用 pjax

使用 yii\widgets\Pjax;

 <?php Pjax::begin(); ?>
   //your content
   <?php $form = ActiveForm::begin(['id' => 'popup-form','options' => ['data-pjax' => true],]); ?>
    //form fields
   <?php ActiveForm::end(); ?>   
   //your content
 <?php Pjax::end(); ?>

Answer 2

这就是我克服问题的方法，这个答案有效，但是可以改进。

此链接指出：http://www.yiiframework.com/doc-2.0/guide-runtime-responses.html#response-body

当当前请求是 AJAX 请求时，发送 Location 标头不会自动导致浏览器重定向。解决 这个问题，yii\web\Response::redirect() 方法设置了一个 以重定向 URL 作为其值的 X-Redirect 标头。在 在客户端，您可以编写 JavaScript 代码来读取此标头值 并相应地重定向浏览器。

信息：Yii 带有一个 yii.js 提供一组常用 JavaScript 的 JavaScript 文件 实用程序，包括基于 X-Redirect 的浏览器重定向 标题。因此，如果您正在使用这个 JavaScript 文件（通过 注册 yii\web\YiiAsset 资产包），你不需要 写任何东西来支持 AJAX 重定向。有关更多信息 yii.js 可以在客户端脚本部分找到。

通过查看此链接：http://www.yiiframework.com/doc-2.0/yii-web-response.html#redirect()-detail

于是我修改了js文件：

$(function(){

    $('#modalButton').click(function(){
            $('#modal').modal('show')
                .find('#modalContent')
                .load($(this).attr('value'));
            }); 

    $document.ajaxComplete(function (event, xhr, settings) {
        var url = xhr && xhr.getResponseHeader('index.php?r=site/mypopup');

        if (url) {
            window.location = url;
        }
    });

});

还有弹出视图：

<?php Pjax::begin(['enablePushState' => false]); ?>

<?php $form = ActiveForm::begin(['id' => 'popup-form', 'options' => ['data-pjax' => true],]); ?>

<?= $form->field($model, 'pattern')->textArea(['rows' => 1]) ?>

   <div class="form-group">
  <?= Html::submitButton('Submit', ['class' => 'btn btn-primary', 'name' => 'popup-button']) ?>
    </div>

   <?php

     echo "<pre>";
     print_r($model->data); 
    ?>

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