如何在Yii2中重新加载Bootstrap模式弹出窗口?

时间:2017-06-27 21:44:02

标签: javascript jquery yii2 bootstrap-modal

我有一个Modal弹出窗口,在用户提交数据后,我想在同一个弹出窗口中显示结果。如何重新加载该模态视图?感谢。

popup 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); 
 ?>

这是调用上述模态弹出视图的视图:

<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();
       ?>

js文件:

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

控制器:

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,
                ]);
            } 
}

2 个答案:

答案 0 :(得分:2)

您是否尝试使用 Pjax 换行?
Yii2将处理表单提交,并在模态弹出窗口中显示控制器的结果。

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

    <div class="row">
        <div class="col-lg-5">
            <?php Pjax::begin(['enablePushState' => false]); ?>
                <?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(); ?>
            <?php Pjax::end(); ?>
        </div>
    </div>
</div>

答案 1 :(得分:0)

您正在使用按钮上的点击事件。而不是在js中单击事件,您需要调用这样的提交事件。

$(function(){

    //get the click of the search button
    $('.site-popup form').submit(function(){
        $('#modal').modal('show')
            .find('#modalContent')
            .load($(this).attr('value'));
        }); 
       return false
});