Ajax 模态窗口中的Yii2表单

我想了解如何在Yii2中从模式窗口使用表单的基本知识？这是我目前的理解，如果有人能解释我错过了什么，我将不胜感激。 所以，我有一个记录列表视图。每条记录包含一个按钮。该按钮打开一个模式，其中包含一个表单：

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();

对于提交，我使用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;
    }

但在点击提交表单后，我看到两个警报。模态也没有隐藏。闪光信息也不会显示。 我做错了什么？有人能清楚地解释数据流的一步一步的过程吗？目前我的理解是：

开放模式

单击模式内的表单提交

通过ajax将数据加载到控制器动作

从post捕获数据并执行控制器动作代码； 我错过了什么

---

我发现了一些问题，首先是在提交事件上使用，所以一旦事件和浏览器再次触发yii（这就是警报显示两次的原因），您应该使用beforeSubmit事件。其次，该消息不会出现，因为您不会再次渲染它，而只是在控制器中设置它。要关闭模式，应将代码更改为

$(".modal").modal('hide'); 

---

一个有用的链接是

，您只需按照以下步骤操作即可

步骤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',
                    ]
                   );
?>

步骤4：定义视图文件\u添加\u注释

<?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">&times;</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(); ?>

&时代；
添加注释
接近

---

这就是它的…：）

这里的解决方案Yii2使用ajax在模式弹出窗口中呈现表单

步骤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>

步骤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">&times;</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);
?>

&时代；
添加联系人
取消

您有两次相同的警报。您是否检查了浏览器控制台以查看是否发出post请求？此视频帮助我了解了我的问题：第一秒

<?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">&times;</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(); ?>

<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>

<?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);
?>

<!-- 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> 

/**
 * 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);
    }
}

<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">&times;</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);
?>