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.
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 to share
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 to share