Yii2 отправить модальную форму с ajax - PullRequest
Новая
       36

Yii2 отправить модальную форму с ajax

0 голосов
/ 17 июня 2019

Я успешно создал модальную форму, но я не могу отправить ее с помощью ajax.Каждый раз, когда я нажимаю кнопку отправки, он не остается на странице индекса, а вместо этого показывает echo 1 из моего контроллера.

Мой контроллер 

public function actionCreate()
{
    $model = new Testing();

    if ($model->load(Yii::$app->request->post())) {
       if($model->save()){
            echo 1;
        }else{
            echo 0;
        }
    }else{

        return $this->renderAjax('create', [
            'model' => $model,
        ]);
    }
}

Моя форма 

 <div class="testing-form">

    <?php $form = ActiveForm::begin(['id' => $model->formName()]); ?>

    <?= $form->field($model, 'test')->textInput(['maxlength' => true]) ?>

    <div class="form-group">
        <?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
    </div>

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

</div>

<?php
$this->registerJS("

$('form#{$model->formName()}'.on('beforeSubmit', function(e)
{
    var \$form = $(this);
    $.post(
        \$form.attr('action'),
        \$form.serialize()
    )
        .done(function(result) {
        if(result == 1)
        {
            $(\$form).trigger('reset'); 
            $.pjax.reload({container:'#issuehrGrid'});
        }else
        {

            $('#message').html(result.message);
        }
        }).fail(function()
        {
            console.log('server error');
        })
    return false;
});"    
);     
?>

Мой взгляд 

<div class="report">
                    <h3>HR Issues</h3>
                     <?= Html::a('<span class="glyphicon glyphicon-plus"></span> Add', ['create'], ['class' => 'btn btn-success modalButton']) ?>
                    <?php Pjax::begin(['id'=>'issuehrGrid']); ?>
                    <table class="table table-bordered table-hover">
                        <tbody>
                        <?php foreach ($dataProvider->models as $hr) {
                          ?>
                          <tr>

                            <td><?=$hr->test;?></td>

                          </tr>
                          <?php } ?>     
                        </tbody>
                    </table>
                    <?php Pjax::end(); ?>
                </div>

Пожалуйста, помогите мне с этим.

Спасибо!

1 Ответ

1 голос
/ 17 июня 2019

Я подозреваю, что она будет показывать вам пустую страницу с 1, отображаемой на ней, потому что после первого представления ваша сетка Pjax перезагружается с помощью оператора 

$.pjax.reload({container:'#issuehrGrid'});

и после перезагрузки ваше beforeSubmit событие больше не привязывается к форме, так как форма Html снова загружается, и когда вы отправляете форму повторно, она просто отправляет простую форму и отображает пустую страницу с 1, вам нужно использовать событие pjax:complete для pjax, так что для перезагрузки сетки ваш скрипт снова привязывает событие beforeSubmit к форме.

Кроме того, у вас есть синтаксическая ошибка в вашем скрипте, которая должна быть исправлена. Измените свой скрипт на следующий 

<?php
$formName = $model->formName();
$js = <<<JS
$(document).on("ready pjax:complete",function(){
    $('form#{$formName}').on('beforeSubmit', function(e){
        var \$form = $(this);
        $.post(
            \$form.attr('action'),
            \$form.serialize()
        ).done(function(result) {
            if(result == 1)
            {
                $(\$form).trigger('reset'); 
                $.pjax.reload({container:'#issuehrGrid'});
            }else
            {
                $('#message').html(result.message);
            }
            }).fail(function()
            {
                console.log('server error');
            })
        return false;
    });
});
JS;
$this->registerJS(
    $js,
    \yii\web\View::POS_READY
);
?>

UPDATE

и не забудьте изменить код действия контроллера и изменить echo 1 на return 1 и echo 0 на return 0

...