Как отправлять данные методом ajax в модальном окне на yii2?

Question

[Silverviql]

Кнопкой вызывается модальное окно

<div class="zakaz-reminderForm">
    <?php $form = ActiveForm::begin([
        'id' => 'shippingZakaz'
    ]); ?>
    <?= $form->field($comment, 'id_user')->hiddenInput(['value' => Yii::$app->user->id])->label(false) ?>
    <?= $form->field($comment, 'id_zakaz')->hiddenInput(['value' => $model])->label(false) ?>

    <?= $form-> field($comment, 'comment')->textInput(['placeholder' => 'Что', 'class' => 'inputForm', 'style' => 'float:left'])->label(false) ?>

    <?= $form->field($comment, 'date')->widget(DateTimePicker::className() ,[
        'pluginOptions' => [
            'autoclose'=>true,
            'startDate' => 'php Y-m-d H:i:s',
            'todayBtn' => true,
            'todayHighlight' => true,
        ],
        'options' => [
            'placeholder' => 'Срок',
        ],
    ])->label(false) ?>




    <div class="form-group">
        <?= Html::submitButton('Отправить', ['class' => 'action']) ?>
    </div>
    <?php ActiveForm::end(); ?>

Все работает, данные отправляют и сохраняются, но при вызове самбит баттон страница перезагружается, хочу сделать чтобы данные просто отправлялись в бд и закрывалось модальное окно.

Добавил в форму модального окна после активформ скрипт

<?php
    $js = <<<JS
     $('form').on('beforeSubmit', function(){
	 var data = $(this).serialize();
	 $.ajax({
	    url: '/comment/create-reminder',
	    type: 'POST',
	    data: data,
	    success: function(res){
	       console.log(res);
	    },
	    error: function(){
	       alert('Error!');
	    }
	 });
	 return false;
     });
JS;

    $this->registerJs($js);
    ?>

Который насколько я понял перехватывает события после нажатия на кнопку и сам отправляет данные.
Но я не могу понять что указывать в урл для отправки.
Функция в контроллере.

public function actionCreateReminder($id)
    {
        $model = $id;
        $comment = new Comment();
        $notification = new Notification();

        if ($comment->load(Yii::$app->request->post()) && $comment->validate()) {
            $comment->save();//сохранение напоминаниея
            if (!$comment->save()) {
                print_r($comment->getErrors());
            } else {
                if(Yii::$app->request->isAjax){
                    if ($comment->load(Yii::$app->request->post()) && $comment->validate()) {
                        if (!$comment->save()) {
                            print_r($comment->getErrors());
                        }
                        Yii::$app->session->addFlash('update', 'Напоминание успешно создано');
                    }
                    return $this->redirect(['zakaz/admin', '#' => $model->id_zakaz]);
                }
                /** @var $model \app\models\Zakaz */
                Yii::$app->session->addFlash('update', 'Напоминание успешно создано');
                $notification->getByIdNotificationComments( '13', $comment, $id_sotrud_put= null,$zakaz= null);
                $notification->getSaveNotification();
            }
            return $this->redirect(['zakaz/admin', '#' => $model->id_zakaz]);
        }


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

Answer 1

[Сергей]

Для ajax валидации:

1. В ActiveForm::begin() нужно добавить 'enableAjaxValidation' => true во view,

2. В контроллере добавить конструкцию для ajax валидации:

if (Yii::$app->request->isAjax && $model->load(Yii::$app->request>post())) {  // если получаем AJAX и POST запрос
      return ActiveForm::validate($model); // выполняем валидацию формы 
   }

Для ajax отправки:

3. Для отправки формы через ajax я всегда пишу свои js скрипты, где я делаю для кнопки preventDefault(), собираю данные из формы и отправляю ajax запросом, - тут главное кроме всех данных формы собрать и __csrf-token и передать его в запросе, иначе бэкэнд просто выбросит запрос как невалидный и не обработает его.

Для popup закртыия:

4. Закрыть popup легко, я так понимаю, Вы будете использовать бутстраповский. Т.е. код клика по сабмит кнопке должен быть примерно такой:

$('.submit-button).click(function(e){
   e.preventDefault();
   // отправка аякса и потом:
   $('#popupselector').modal('hide');
});

Comments

[Silverviql]

Смотри, есть представление есть контроллер.
При нажатие он пост запросом отправляет данные, если я в контроллере отключу редирект после сохранение он будет переходить на страницу форма ввода которая подругружалась в модальное окно.
Как после того данные в бд сохранились просто закрыть модальное окно и чтобы можно было дальше работать?.
То что ты скинул очень громозкое решение.

[Сергей]

Silverviql,
Определись уже.
Ты писал "Как отправлять данные методом ajax", а сейчас говоришь, что отключишь редирект и он будет переходить на страницу.

>Как после того данные в бд сохранились просто закрыть модальное окно
у $.post усть callback функция success. На нее вешаешь закрытие. Но это не подходит потому что ты писал "То что ты скинул очень громозкое решение.", а как иначе?

[Сергей]

Silverviql,
вот только что реализовал задачу по своей работе. задача похожа, только мне надо отобразить в poup сообщение, а не закрыть его:

$(function() {
 	$('#subscribe-button').click(function(e){
 		e.preventDefault();
 		var formdata = $('#mc4wp-form-1').serialize();
 		var action = $('#mc4wp-form-1').attr('action');
 		$.ajax({
		    type: "POST",
		    url: action,
		    data: formdata,
		    //dataType: "json",
		    success: function(data) {
		    	if (data == 'yep') {
		        	alertpopup('Your e-mail is added, thank you!');
		    	} else {
		    		alertpopup('Error, the e-mail is incorrect');
		    		//console.log(data);
		    	}
		    },
		    error: function() {
		        alertpopup('Error, the e-mail is incorrect');
		    }
		});
 		
 	});
 });

Answer 2

[LAV45]

Можете воспользоваться компонентом lav45/yii2-ajax-create