yii2表单进入模态并渲染提交到相同的模态

Question

我有一个模态表单，其中包含一个“新项目”文本输入、一个项目列表和一个提交按钮。一切都很完美，但我想在提交后在同一个模态中再次呈现同一个页面（而不是已更新）。它不是在整个浏览器中打开，而是在整个浏览器中打开。我希望所有操作都发生在模态中。我发现的所有示例似乎都将目标从模态中取出。

以这种方式保存后，我尝试使用 renderAjax 而不是渲染...

if ($model->load(Yii::$app->request->post()) && $model->save()) {
    return $this->renderAjax('listar', [
        'searchModel' => $searchModel,
        'dataProvider' => $dataProvider,
        'pages' => $pages,
        'model' => $model
    ]);
} else {
    return $this->renderAjax('listar', [
        'searchModel' => $searchModel,
        'dataProvider' => $dataProvider,
        'pages' => $pages,
        'model' => $model
    ]);
}

（这意味着删除条件，我知道。）

我的看法：

<div class="incidencias-listar">

    <?
    Pjax::begin([
        'enablePushState' => false,
        'id' => uniqid('pjax_') 
    ]);
    ?> 

    <div class="row">

        <div class="col-sm-12 col-md-12 col-lg-12">

            <div class="incidencias-form">

                <?
                $form = ActiveForm::begin();
                ?>

                <?
                echo $form->field($model, 'inc_descripcion')->textInput([
                    'maxlength' => true,
                    'tabindex' => '1' 
                ])->label('Descripción');
                ?>

                <div class="form-group">
                    <?= Html::submitButton('Añadir', ['class' => 'btn btn-primary'])?>
                </div>

                <?php ActiveForm::end(); ?>

            </div>

        </div>

    </div>

    <?
    echo ListView::widget([
        'dataProvider' => $dataProvider,
        'id' => uniqid('listview'),
        'options' => [
            'tag' => 'div',
            'class' => 'list-wrapper',
            'id' => 'list-wrapper' 
        ],
        'layout' => '<div class="row paginador">{pager}</div><div class="row">{summary}</div><div>{items}</div>',
        'summary' => "<div class=\"col-sm-12 col-md-12 col-lg-12\"><div class=\"pull-left\"><br/>Mostrando <b>{begin}</b>-<b>{end}</b> de <b>{totalCount}</b> incidencias.<br/><br/></div></div>",

        'itemView' => function ($model, $key, $index, $widget) {
            return $this->render('_list_item', [
                'model' => $model 
            ]);
        },
        'itemOptions' => [
            'class' => 'item' 
        ] 
    ]);
    ?>

    <? Pjax::end(); ?>

</div>

我还尝试创建另一个由内部提交按钮触发的 ajax 事件，以将目标显示到另一个模式中。

尝试了很多选择都没有运气。

Answer 1

您可以使用 ajax 发布并在控制器中保存模型而不进行渲染。

在您的 _form 中：

$script = <<< JS
    $( document ).ready(function() {   

        $('#form').on('beforeSubmit', function(event, jqXHR, settings) {
           var form = $(this);
           var formData = new FormData($(this)[0]); 

            $.ajax({
                url: form.attr('action'),
                type: 'post',
                data: formData,
                contentType: false,
                processData: false,
                success: function(data) {  
                    if(data === 'true')
                    {                        
                       // model save ok
                       $(form).trigger("reset");
                       $.pjax.reload({container:'#grid-pjax'}); 
                    } 

                },
                 error: function(XMLHttpRequest, textStatus, errorThrown) {
                    $('#FlashErrorModalContacto').html("Text Error").fadeIn(); // show error in a div
                }
            });

            return false;
        })

    });
JS;
$this->registerJs($script);

在你的控制器中：

public function actionCreate(){
   $model = new Contacto();
   if ($model->load(Yii::$app->request->post()) && $model->save()) {
      return 'true';

   } else {
      return 'false';
   }
}