yii2形成模态并渲染提交到同一模态

时间:2016-11-02 19:13:33

标签: jquery twitter-bootstrap yii2

我将表单转换为一个带有单个'新项目的模式'文本输入,项目列表和提交按钮。一切都很完美,但我想提交再次渲染相同模式内的相同页面(比已更新)。而不是它在整个浏览器中打开。我希望所有的操作都发生在模态中。我发现的所有例子似乎都把目标从模态中删除了。

我以这种方式保存后尝试使用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事件,以将目标显示到另一个模态中。

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

1 个答案:

答案 0 :(得分:0)

您可以使用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';
   }
}