模态窗口中的 Yii2 表单
[英] Yii2 Form in Modal Window
本文介绍了模态窗口中的 Yii2 表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想了解如何在 Yii2 的 Modal 窗口中使用表单的基础知识?这是我目前的理解，如果有人能解释我遗漏了什么，我将不胜感激.所以，我有一个带有记录的 ListView.每条记录都包含一个按钮.该按钮会打开一个里面有一个 Form 的 Modal:
echo Html::a('<span class="glyphicon glyphicon-bell" aria-hidden="true"></span>', ['#'],['id' =>$model->id,'类' =>'链接按钮','数据切换'=>'模态'，'数据工具提示'=>'真'，'data-target'=>'#submit_vote'.$model->id，'标题'=>'分配']);模态::开始(['尺寸' =>'模态-lg','选项' =>['id' =>'submit_vote'.$model->id,],'标题' =>'<h2>创建投票</h2>','页脚' =>'页脚']);ActiveForm::begin(['动作' =>'投票/投票','方法' =>'邮政'，'id' =>'form'.$model->id]);回声HTML::输入('类型:文本','搜索'，'',['占位符' =>'搜索...'，'类' =>'形式控制']);回声 Html::submitButton('<span class="glyphicon glyphicon-search"></span>',['类' =>'btn btn-成功',]);ActiveForm::End();模态::结束();
在动作"表格中，我写了投票/投票和方法帖子.所以我希望在我的 VoteController 的 actionVote 函数中发布数据.
公共函数 actionVote(){if (Yii::$app->request->post()) {$id = Yii::$app->request->post('search');Yii::$app->session->setFlash('error', $id);返回真；}}
提交时我使用了ajax:
$('form').on('submit', function () {alert($(this).attr('id')+$(this).attr('action')+$(this).serialize());//只是为了看看有什么数据传入jsif($(this).attr('id') !== 'searchForm') {//一些检查$.ajax({网址:$(this).attr('action'),类型:'帖子'，数据:$(this).serialize(),成功:函数(){$("#submit_vote15").modal('隐藏');//隐藏弹出窗口},});返回假；}
但在点击提交表单后，我看到两个警报.模态也不隐藏.Flash 消息也不显示.我做错了什么?任何人都可以清楚地解释数据流的分步过程吗?目前我的理解是:
- 打开模态；
- 点击Modal内的Form Submit；
- 通过ajax加载数据到控制器动作；
- 从post中获取数据并执行控制器动作代码；我错过了什么?
解决方案
您只需按照以下步骤...
step1:定义你的链接按钮
<?php echo Html::a('<span class="glyphicon glyphicon-comment"></span>',['/feed/mycomment','id' =>$model->id],['标题' =>'查看提要评论','数据切换'=>'模态'，'数据目标'=>'#modalvote',]);?>
step2:定义你的弹出窗口(远程 url)
<div class="modal-dialog"><div class="modal-content loader-lg"></div>
step3: 在你的控制器中定义你的远程 url 动作
公共函数 actionMyComment(){$model = new MyComment();return $this->renderAjax('_add_comment', ['模型' =>$模型，]);}
step4:定义你的视图文件_add_comment
<?php $form = ActiveForm::begin([ 'enableClientValidation' => true,'选项' =>['id' =>'动态形式']]);?><div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button><h4 class="modal-title">添加评论</h4>
<div class="modal-body"><?php echo $form->field($model, 'name')->textInput(['maxlength' => true]) ?><?php echo $form->field($model, 'email')->textInput(['maxlength' => true]) ?><?php echo $form->field($model, 'comment')->textArea() ?>
<div class="modal-footer"><?php echo Html::submitButton(Yii::t('backend', 'Send'), ['class' => 'btn btn-success']) ?><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<?php ActiveForm::end();?>
这就是它...:)
I would like to understand the basics of how to work with form from Modal window in Yii2? This is my current understanding and I will be grateful if someone can explain me what I missed.
So, I have a ListView with records. Each record contains a button. The button opens a Modal with a Form inside:
echo Html::a('<span class="glyphicon glyphicon-bell" aria-hidden="true"></span>', ['#'],[
'id' => $model->id,
'class' => 'linkbutton',
'data-toggle'=>'modal',
'data-tooltip'=>'true',
'data-target'=>'#submit_vote'.$model->id,
'title'=> 'Assign'
]);
Modal::begin([
'size' => 'modal-lg',
'options' => [
'id' => 'submit_vote'.$model->id,
],
'header' => '<h2>Create Vote</h2>',
'footer' => 'Footer'
]);
ActiveForm::begin([
'action' => 'vote/vote',
'method' => 'post',
'id' => 'form'.$model->id
]);
echo Html::input(
'type: text',
'search',
'',
[
'placeholder' => 'Search...',
'class' => 'form-control'
]
);
echo Html::submitButton(
'<span class="glyphicon glyphicon-search"></span>',
[
'class' => 'btn btn-success',
]
);
ActiveForm::End();
Modal::end();
In Form 'action' I wrote vote/vote and method post. So I expect post data inside actionVote function of my VoteController.
public function actionVote()
{
if (Yii::$app->request->post()) {
$id = Yii::$app->request->post('search');
Yii::$app->session->setFlash('error', $id);
return true;
}
}
For submitting I use an ajax:
$('form').on('submit', function () {
alert($(this).attr('id')+$(this).attr('action')+$(this).serialize()); //just to see what data is coming to js
if($(this).attr('id') !== 'searchForm') { //some check
$.ajax({
url: $(this).attr('action'),
type: 'post',
data: $(this).serialize(),
success: function(){
$("#submit_vote15").modal('hide'); //hide popup
},
});
return false;
}
But after click on Submit form I see two alerts. Modal also not hidden. Flash message also is not showed.
What I am doing wrong? Can anyone clearly explain a step by step procedure of data flow? For now my understanding is:
- Open Modal;
- Click Form Submit inside Modal;
- Load data via ajax to controller action;
- catch data from post and execute controller action code;
What I missed?
解决方案
You may simply follow below step...
step1: define your link button like
<?php echo Html::a('<span class="glyphicon glyphicon-comment"></span>',
['/feed/mycomment','id' => $model->id],
[
'title' => 'View Feed Comments',
'data-toggle'=>'modal',
'data-target'=>'#modalvote',
]
);
?>
step2: define your popup window(remote url)
<div class="modal remote fade" id="modalvote">
<div class="modal-dialog">
<div class="modal-content loader-lg"></div>
</div>
</div>
step3: define your remote url action in your controller like
public function actionMyComment()
{
$model = new MyComment();
return $this->renderAjax('_add_comment', [
'model' => $model,
]);
}
step4: define your view file _add_comment
<?php
use yiihelpersHtml;
use yiiootstrapActiveForm;
?>
<?php $form = ActiveForm::begin([ 'enableClientValidation' => true,
'options' => [
'id' => 'dynamic-form'
]]);
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Comment</h4>
</div>
<div class="modal-body">
<?php echo $form->field($model, 'name')->textInput(['maxlength' => true]) ?>
<?php echo $form->field($model, 'email')->textInput(['maxlength' => true]) ?>
<?php echo $form->field($model, 'comment')->textArea() ?>
</div>
<div class="modal-footer">
<?php echo Html::submitButton(Yii::t('backend', 'Send'), ['class' => 'btn btn-success']) ?>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<?php ActiveForm::end(); ?>
that's its...:)
这篇关于模态窗口中的 Yii2 表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
