我有一个Modal弹出窗口,在用户提交数据后,我想在同一个弹出窗口中显示结果。如何重新加载该模态视图?感谢。
这是弹出视图:
<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,
]);
}
}
答案 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
});