在Yii2中整理数据后，Bootstrap Modal弹出窗口消失了吗? [英] Bootstrap Modal popup is disappearing after summitting data in Yii2?

问题描述

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

I have a Modal popup which disappears after submitting the form's data, however the model is designed to return the answers on the same view, it works correctly independently, however it is not working that way as a popup. How do I keep the popup after submitting the data? I think the problem might be on the Controller. Thanks.

mypopup视图:

The mypopup view:

<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的视图:

This is the view that call the 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'));
        }); 
});

推荐答案

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

This is how I have overcome the issue, this answer works, however it could be improved.

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

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

When the current request is an AJAX request, sending a Location header will not automatically cause the browser to redirect. To solve this problem, the yii\web\Response::redirect() method sets an X-Redirect header with the redirection URL as its value. On the client-side, you may write JavaScript code to read this header value and redirect the browser accordingly.

信息:Yii带有yii.js提供一组常用JavaScript的JavaScript文件实用程序，包括基于X-Redirect的浏览器重定向标头.因此，如果您正在使用此JavaScript文件(通过注册yii \ web \ YiiAsset资产捆绑包)，则无需写任何东西来支持AJAX重定向.有关更多信息yii.js可以在客户端脚本"部分中找到.

Info: Yii comes with a yii.js JavaScript file which provides a set of commonly used JavaScript utilities, including browser redirection based on the X-Redirect header. Therefore, if you are using this JavaScript file (by registering the yii\web\YiiAsset asset bundle), you do not need to write anything to support AJAX redirection. More information about yii.js can be found in the Client Scripts Section.

通过检查以下链接: http://www.yiiframework.com/doc-2.0/yii-web-response.html#redirect()-详细信息

所以我修改了js文件:

So I modified the js file:

$(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 Modal弹出窗口消失了吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！