How to update Bootstrap popup in Yii2?

I have a Modal popup, after the user submits data, I want to show the results in the same popup. How do I reload this modal view? Thank.

popup view

This is the popup:

<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 invokes the modal popup described above:

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

      

+3


source to share


2 answers


Have you tried to wrap a block using Pjax ?
Yii2 processes the form submit and displays the results from the controller in a 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>

      

+2


source


You are using a click event on a button. Instead of a click event in js, you will need to call the 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
});

      

0


source







All Articles