Отправка данных ActiveForm через Ajax

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
Ответить
jekaspekas
Сообщения: 62
Зарегистрирован: 2014.01.29, 13:07

Отправка данных ActiveForm через Ajax

Сообщение jekaspekas »

Всем доброго времени суток!
Если не сложно скиньте любой рабочий пример того как отправить данные из ActiveForm через Ajax, достаточно вьюшки и контроллера :roll:.
Понимаю что первым делом скажите "поиск на что?" - отвечаю ничего кроме решений такого типа http://www.yiiframework.ru/forum/viewtopic.php?t=16188 (от 12.01.14) за 3 дня не нашел.
А между тем свойство beforeSubmit в ActiveForm отсутствует (для версии yii 2.0.2).
Vespertilio
Сообщения: 271
Зарегистрирован: 2012.11.30, 07:33

Re: Отправка данных ActiveForm через Ajax

Сообщение Vespertilio »

jekaspekas писал(а):Всем доброго времени суток!
Если не сложно скиньте любой рабочий пример того как отправить данные из ActiveForm через Ajax, достаточно вьюшки и контроллера :roll:.
Понимаю что первым делом скажите "поиск на что?" - отвечаю ничего кроме решений такого типа http://www.yiiframework.ru/forum/viewtopic.php?t=16188 (от 12.01.14) за 3 дня не нашел.
А между тем свойство beforeSubmit в ActiveForm отсутствует (для версии yii 2.0.2).
ActiveForm генреирует обычный html просто вместо submit button повесьте свой ajax post
jekaspekas
Сообщения: 62
Зарегистрирован: 2014.01.29, 13:07

Re: Отправка данных ActiveForm через Ajax

Сообщение jekaspekas »

Спасибо!
Использовал виджет AjaxSubmitButton:

Код: Выделить всё

    use demogorgorn\ajax\AjaxSubmitButton;
    //...
    <div class="form-group">
        <?php 
            AjaxSubmitButton::begin([
                'label' => 'Сохранить',
                'ajaxOptions' => [
                    'type' => 'POST',
                    'url' => 'update?id='.$model->id,
                    'success' => new \yii\web\JsExpression('function(html){
                        $("#output").html("Сохранено выполнено");
                    }'),
                ],
                'options' => ['class' => 'btn btn-primary', 'type' => 'submit'],
            ]);
            AjaxSubmitButton::end();
        ?>
        <div id="output"></div>
    </div>
Думал есть различия для простой HTML формы и ActiveForm. Сейчас работает!
Аватара пользователя
zabachok
Сообщения: 522
Зарегистрирован: 2013.12.16, 14:38

Re: Отправка данных ActiveForm через Ajax

Сообщение zabachok »

А разве нет этой реализации нативно?
2b||!2b Just read the instructions
Аватара пользователя
mistbow
Сообщения: 64
Зарегистрирован: 2013.11.05, 20:26
Контактная информация:

Re: Отправка данных ActiveForm через Ajax

Сообщение mistbow »

Да ладно? Т.е. нельзя ajaxом данные формы слать нативно?????
Аватара пользователя
ElisDN
Сообщения: 5845
Зарегистрирован: 2012.10.07, 10:24
Контактная информация:

Re: Отправка данных ActiveForm через Ajax

Сообщение ElisDN »

Нативно код можно окружать в Pjax:

Код: Выделить всё

<?php Pjax::begin(['id' => 'my-pjax']); ?>
    <?php if ($model->id): ?>
        <p>Сохранено выполнено.</p>
    <?php else: ?>
        <?php $form = ActiveForm::begin(['options' => ['data-pjax' => true]]); ?>
            <?= $form->field($orderForm, 'name') ?>
            <?= Html::submitButton('Отправить', ['class' => 'btn btn-primary']) ?>
        <?php ActiveForm::end(); ?>
    <?php endif; ?>
<?php Pjax::end(); ?>
И не забыть в контроллере отменить редирект если это Pjax-запрос:

Код: Выделить всё

public function actionCreate()
{
    $model = new MyModel();        
    if ($model->load(Yii::$app->request->post()) && $model->save()) {
        if (!Yii::$app->request->isPjax) {
            return $this->redirect(['view', 'id' => $model->id]);
        }
    }
    return $this->render('create', [
        'model' => $model,
    ]);
}
Аватара пользователя
twix
Сообщения: 86
Зарегистрирован: 2011.12.12, 18:25

Re: Отправка данных ActiveForm через Ajax

Сообщение twix »

Дмитрий (ElisDN) спасибо! Как всегда кратко и по делу)
Pjax воистину прекрасен! Сейчас как раз его заюзал на сайте с кучей форм в модальных окнах.
Аватара пользователя
ElisDN
Сообщения: 5845
Зарегистрирован: 2012.10.07, 10:24
Контактная информация:

Re: Отправка данных ActiveForm через Ajax

Сообщение ElisDN »

Пожалуйста! А у Вас на счёт вебинаров какие-нибудь предложения есть?
lynicidn
Сообщения: 2222
Зарегистрирован: 2014.05.24, 15:12

Re: Отправка данных ActiveForm через Ajax

Сообщение lynicidn »

ElisDN писал(а):Пожалуйста! А у Вас на счёт вебинаров какие-нибудь предложения есть?
по проще выбираешь ? :) или наших тем мало ? :)
Аватара пользователя
NEIRON
Сообщения: 102
Зарегистрирован: 2013.10.23, 07:18

Re: Отправка данных ActiveForm через Ajax

Сообщение NEIRON »

ElisDN писал(а):Нативно код можно окружать в Pjax:
Cреди параметров Pjax не совсем понял, как передать селектор, который необходимо изменить после выполнения submit

Код: Выделить всё

<div class="comments">
....
</div>
 <?php Pjax::begin(['id' => 'my-pjax','enablePushState' => false, 'linkSelector'=>'.comments']); ?>     
        <?php $form = ActiveForm::begin(['action' => '/comment/create', 'options' => ['data-pjax' => true]]); ?>
        <?= $form->field($modelComment, 'text')->textarea(['rows' => 6]) ?>
        <?= Html::submitButton('Отправить', ['class' => 'btn btn-primary']) ?>
        <?php ActiveForm::end(); ?>
<?php Pjax::end(); ?>
Т.е. например контроллер /comment/create добавляет в базу 1 комментарий и возвращает его. И хочу что бы этот комментарий попал в указанный мной DIV.comments. А по факту получаю, что этот комментарий заменяет мою форму.
Аватара пользователя
Neuromance
Сообщения: 716
Зарегистрирован: 2011.09.06, 13:04

Re: Отправка данных ActiveForm через Ajax

Сообщение Neuromance »

Код: Выделить всё

Pjax::begin(['id'=>'pjax-container-form']);
//form
Pjax::end();

Pjax::begin(['id'=>'pjax-container-comments']);
//comments
Pjax::end();

$this->reginsterJs('
    $("#pjax-container-form").on("pjax:end", function() {
        var url = "'.Url::toRoute(['/comments/list']).'";
          $.pjax({url: url, container: '#pjax-container-comments'})
    })
');
PS. хотя комменты вроде можно в pjax не оборачивать. Просто при вызове $.pjax использовать нужный селектор.
Аватара пользователя
NEIRON
Сообщения: 102
Зарегистрирован: 2013.10.23, 07:18

Re: Отправка данных ActiveForm через Ajax

Сообщение NEIRON »

Neuromance писал(а): хотя комменты вроде можно в pjax не оборачивать. Просто при вызове $.pjax использовать нужный селектор.
Да, теперь блок с комментариями обновляется, но форма, всё равно заменяется, на то, что возвращает контроллер:

Код: Выделить всё

     <div id="comments">
            ...
        </div>
        
        <?php Pjax::begin(['id' => 'my-pjax', 'enablePushState' => false]); ?>
        <?php $form = ActiveForm::begin(['action' => '/comment/create', 'options' => ['data-pjax' => true]]); ?>
        <?= $form->field($modelComment, 'text')->textarea(['rows' => 6]) ?>
        <?= Html::submitButton('Отправить', ['class' => 'btn btn-primary']) ?>
        <?php ActiveForm::end(); ?>
        <?php Pjax::end(); ?>

        <?php
        $this->registerJs('
            $("#my-pjax").on("pjax:end", function() {
                var url = "' . Url::toRoute(['/comment/list']) . '";
                $.pjax({url: url, container: "#comments"});
            })');
        ?>
Причем, если в контроллере не делать return, то происходит redirect. Это в документации я нашёл, что return обязателен.

Код: Выделить всё

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

        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            if (!Yii::$app->request->isPjax) {
                return $this->redirect(['view', 'id' => $model->id]);
            }else{
                return 'Комментарий успешно добавлен';
            }
        } else {
            return $this->render('create', [
                'model' => $model,
            ]);
        }
    }
Как же оставить форму без изменения, или её придется каждый раз заново render'ить при pjax-запросе?
Аватара пользователя
Neuromance
Сообщения: 716
Зарегистрирован: 2011.09.06, 13:04

Re: Отправка данных ActiveForm через Ajax

Сообщение Neuromance »

Смысл pjax в том,что блок, обернутый в PJAX, обновляется полностью пришедшим ответом сервера. Поэтому возвращайте просто форму.

Код: Выделить всё

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

        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            if (!Yii::$app->request->isPjax) {
                return $this->redirect(['view', 'id' => $model->id]);
            }
        } 
        return $this->render('create', [
             'model' => $model,
        ]);
    }

 
Аватара пользователя
NEIRON
Сообщения: 102
Зарегистрирован: 2013.10.23, 07:18

Re: Отправка данных ActiveForm через Ajax

Сообщение NEIRON »

Neuromance писал(а):Смысл pjax в том,что блок, обернутый в PJAX, обновляется полностью пришедшим ответом сервера. Поэтому возвращайте просто форму.
Хорошо. Спасибо.
Ответить