Question

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

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（）方法设置了一个   X-Redirect标头，其中重定向URL为其值。在   客户端，您可以编写JavaScript代码来读取此标头值   并相应地重定向浏览器。

信息：Yii带有yii.js   JavaScript文件，它提供了一组常用的JavaScript   实用程序，包括基于X-Redirect的浏览器重定向   头。因此，如果您使用此JavaScript文件（通过   注册yii \ web \ YiiAsset资产包），您不需要   写任何东西来支持AJAX重定向。有关的更多信息   yii.js可以在Client Scripts Section中找到。

点击此链接：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(); ?>

在Yii2中登顶数据后，Bootstrap模态弹出窗口正在消失？

2 个答案: