How to Reload a Bootstrap Modal popup in Yii2?

Question

I have a Modal popup, after the user submit the data, I want to show the results on the same popup. How do I reload that modal view? Thanks.

This is the 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); 
 ?>

This is the view that calls to the above modal popup view:

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

The js file:

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

Controller:

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

use just button instead of submit and then call ajax of onclick, and return the view in same modal. — Rajesh Pradhan, Jun 30 '17 at 18:13
What do you mean with: " return the view in same modal". Thanks @Rajesh Pradhan — Jan Beeck, Jul 01 '17 at 02:33
i mean call ajax if save then, then return response in modal — Rajesh Pradhan, Jul 01 '17 at 09:10

score 2 · Answer 1 · answered Jun 28 '17 at 04:17

have you tried to wrap block with Pjax?
Yii2 will handle form submit, and display results from controller in modal popup.

<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>

I have tried the above (wrap the whole ActiveForm with Pjax), but the popup view is not reloading after the data is submitted. What else need to be done? Thanks. — Jan Beeck, Jun 28 '17 at 04:45

score 0 · Answer 2 · edited Jul 03 '17 at 09:25

0

You are using the click event on the button. Instead of click event in js you would need to call submit event like this.

$(function(){

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

edited Jul 03 '17 at 09:25

Pang

9,564
146
81
122

answered Jun 28 '17 at 15:10

Ramesh Mahajan

1
1

Thanks for the answer @Ramesh Mahajan, but the popup view is not appearing with the above code :( What could be wrong on the js file? Thanks. – Jan Beeck Jun 28 '17 at 17:04

How to Reload a Bootstrap Modal popup in Yii2?

2 Answers2