ajax - 模态窗口中的 Yii2 表单

Question

我想了解如何在 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();

在表格“ Action ”中，我写了投票/投票和方法帖子。所以我希望在我的 VoteController 的 actionVote 函数中发布数据。

public function actionVote()
    {
        if (Yii::$app->request->post()) {
        $id = Yii::$app->request->post('search');
        Yii::$app->session->setFlash('error', $id);
        return true; 
        }
    }

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

但是在单击提交表单后，我看到两个警报。模态也不隐藏。 Flash 消息也不显示。
我做错了什么？任何人都可以清楚地解释数据流的分步过程吗？目前我的理解是:

打开模态；

点击Modal里面的Form Submit；

通过ajax加载数据到 Controller Action ；

从 post 中捕获数据并执行 Controller Action 代码；
我错过了什么？

Answer 1

您可以简单地按照以下步骤...

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

步骤 2:定义你的弹出窗口(远程 url)

<div class="modal remote fade" id="modalvote">
        <div class="modal-dialog">
            <div class="modal-content loader-lg"></div>
        </div>
</div>

步骤 3:在 Controller 中定义远程 url 操作，例如

public function actionMyComment()
{
       $model = new MyComment();
       return $this->renderAjax('_add_comment', [
                'model' => $model,
        ]);

}

step4:定义你的 View 文件_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">&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(); ?>

那是它的...:)