ajax 模态窗口中的 Yii2 表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36106325/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Yii2 Form in Modal Window
提问by Dmytro
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:
我想了解如何在 Yii2 的 Modal 窗口中使用表单的基础知识？这是我目前的理解，如果有人能解释我遗漏了什么，我将不胜感激。所以，我有一个带有记录的 ListView。每条记录都包含一个按钮。该按钮会打开一个带有 Form 的 Modal：
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.
在表格“动作”中，我写了投票/投票和方法帖子。所以我希望在我的 VoteController 的 actionVote 函数中发布数据。
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:
对于提交，我使用 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:
但是在单击提交表单后，我看到两个警报。模态也不隐藏。Flash 消息也不显示。我做错了什么？任何人都可以清楚地解释数据流的分步过程吗？目前我的理解是：
- 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?
- 打开模态；
- 点击Modal里面的Form Submit；
- 通过ajax加载数据到控制器动作；
- 从 post 中捕获数据并执行控制器动作代码；我错过了什么？
回答by Kalpesh Desai
You may simply follow below step...
您可以简单地按照以下步骤...
step1: define your link button like
步骤 1：定义您的链接按钮，例如
<?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)
步骤 2：定义你的弹出窗口（远程 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
步骤 3：在控制器中定义远程 url 操作，例如
public function actionMyComment()
{
$model = new MyComment();
return $this->renderAjax('_add_comment', [
'model' => $model,
]);
}
step4: define your view file _add_comment
step4：定义你的视图文件_add_comment
<?php
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
?>
<?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...:)
那是它的...:)
回答by Pablo Flores
I see a few problems, first you're using on submit event, so yii fires once the event and the browser a second time (that's the reason the alert shows twice), you should use the beforeSubmit event. Second, the message doesn't appear because you're not rendering it again, your just setting it in your controller. To close the modal you should change your code to
我看到一些问题，首先你使用的是提交事件，所以 yii 触发一次事件和浏览器第二次（这就是警报显示两次的原因），你应该使用 beforeSubmit 事件。其次，该消息不会出现，因为您没有再次渲染它，您只是在控制器中设置它。要关闭模式，您应该将代码更改为
$(".modal").modal('hide');
A usefull link is this
一个有用的链接是 这个
回答by Mahesh Kathiriya
Here SolutionYii2 Render a form in a Modal Popup using ajax
这里的解决方案Yii2 Render a form in a Modal Popup using ajax
STEP 1 : BUTTON TO OPEN MODEL
第 1 步：按钮打开模型
<span class="hand-cursor-pointer quick-add-contact" title="Add Contact"><i class="fa fa-plus-circle" aria-hidden="true"></i>Add Contact Via Model</span>
STEP 2 : JAVASCRIPT
第 2 步：JAVASCRIPT
<?php
$url = Yii::$app->urlManager->createUrl('modulesname/controllername/add-contact');
$script = <<< JS
//QUICK CREARE CONTACT MODEL
$(document).on('click', '.quick-add-contact', function () {
$('#addContactFormModel').modal('show').find('.modal-dialog').load('$url');
});
JS;
$this->registerJs($script);
?>
STEP 3 : MODEL HTML :
第 3 步：模型 HTML：
<!-- POPUP MODAL CONTACT -->
<div class="modal inmodal contact" id="addContactFormModel" role="dialog" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-md "></div>
</div>
STEP 4 : CONTROLLER
第 4 步：控制器
/**
* Quick Add Contact Action
* @param type $id
* @return type
*/
public function actionAddContact() {
$model = new ContactsManagement();
if (Yii::$app->request->isAjax && $model->load(Yii::$app->request->post())) {
$transaction = \Yii::$app->db->beginTransaction();
try {
if ($model->validate()) {
$flag = $model->save(false);
if ($flag == true) {
$transaction->commit();
return Json::encode(array('status' => 'success', 'type' => 'success', 'message' => 'Contact created successfully.'));
} else {
$transaction->rollBack();
}
} else {
return Json::encode(array('status' => 'warning', 'type' => 'warning', 'message' => 'Contact can not created.'));
}
} catch (Exception $ex) {
$transaction->rollBack();
}
}
return $this->renderAjax('_add_form', [
'model' => $model,
]);
}
/*
* QUICK CREATE CONTACT FORM VALIDATION
*/
public function actionContactValidate() {
$model = new ContactsManagement();
if (Yii::$app->request->isAjax && $model->load(Yii::$app->request->post())) {
$model->company_id = Yii::$app->user->identity->company_id;
$model->created_at = time();
\Yii::$app->response->format = Response::FORMAT_JSON;
return ActiveForm::validate($model);
}
}
STEP 5 : VIEW FILE
第 5 步：查看文件
<div class="modal-content animated bounceInTop" >
<?php
$form = ActiveForm::begin(['id' => 'form-add-contact', 'enableAjaxValidation' => true, 'validationUrl' => Yii::$app->urlManager->createUrl('contacts/contacts/contact-validate')]);
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title text-left">Add Contact</h4>
</div>
<div class="modal-body">
<?= $form->field($model, 'name')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'emailid')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'mobile')->textInput(['maxlength' => true]) ?>
<div class=" view-btn text-left">
<?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-default' : 'btn btn-default']) ?>
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
</div>
</div>
<?php ActiveForm::end(); ?>
</div>
<?php
$script = <<< JS
$(document).ready(function () {
$("#form-add-contact").on('beforeSubmit', function (event) {
event.preventDefault();
var form_data = new FormData($('#form-add-contact')[0]);
$.ajax({
url: $("#form-add-contact").attr('action'),
dataType: 'JSON',
cache: false,
contentType: false,
processData: false,
data: form_data, //$(this).serialize(),
type: 'post',
beforeSend: function() {
},
success: function(response){
toastr.success("",response.message);
$('#addContactFormModel').modal('hide');
},
complete: function() {
},
error: function (data) {
toastr.warning("","There may a error on uploading. Try again later");
}
});
return false;
});
});
JS;
$this->registerJs($script);
?>
