Почему за одну отправку формы срабатывает несколько ajax запросов?

Question

[Сергей БАрд]

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

$this->registerJs("
	$('#add_report').on('click', function() {
		$('#blockForLoadfunction').empty();
		$('#blockForLoadfunction').load('" . Url::to(['/project-group-report/load']) . "');
	});
");

модалка имеет вот такой код

Modal::begin([
    'options' => [
        'id' => 'kartik-modal',
        'tabindex' => false
    ]
]);
	Pjax::begin([
		'id'=> 'reportModelShow', 
		'enablePushState'=> false, 
		'timeout'=>5000
	]); 
		<?php $form = ActiveForm::begin([
			'action' =>['/project-group-report/load'],
			'id' => 'reportModelShowForm',
			'options' => [
				'enctype' => 'multipart/form-data',
				'data-pjax' => true,
			]
		]); ?>
			//разные поля формы
		<?php ActiveForm::end(); ?>
	Pjax::end();
Modal::end();

$this->registerJs("
	$('#kartik-modal').modal('show');
	$('.btn-outline, .close').on('click', function() {
		$('#kartik-modal').modal('hide');
	});
");

работает почти все как нужно.
Перезагружаю страницу, нажимаю на кнопку, выскакивает модалка, заполняю данные и нажимаю сохранить все работает как нужно, дебаг показывает 1 ajax сработал. Но если я закрою модалку НЕ ПЕРЕЗАГРУЖУ СТРАНИЦУ, а просто закрою и потом опять открою, оформлю форму и нажму отправить то все опять сработает но уже вместо 1 ajax сработает 2 за одну отправку, если я так и дальше продолжу просто закрывать открывать модалку без перезагрузки и отправлять форму то количество ajax запросов за одну отправку будет столько же сколько я закрывал\открывал модалку.

вот пример одного срабатывания после нескольких раз закрытия\открытия модального окна

Если перезагружать страничку после каждой отправки формы то нормально работает.
Из-за этого соответственно в базе есть дубли так как за одну отправку формы срабатывает несколько.
Еще нужно сказать что если например за один раз сработало три запроса то один из них будет нормальный, а все остальные будут точно с такими же параметрами только с одним отличием в их заголовках будет вот такая запись - "Client closed connection before receiving entire response".

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

Answer 1

[Артем Спиридонов]

event.preventDefault();
 event.stopPropagation();

Comments

[Сергей БАрд]

отписал ниже в ответе, пробовал добавлять

[Артем Спиридонов]

Сергей БАрд, тогда просто отладка

Answer 2

[Rsa97]

количество ajax запросов за одну отправку будет столько же сколько я закрывал\открывал модалку

Обычно, такое поведение означает, что при каждом нажатии на кнопку вы заново добавляете обработчик нажатия. Учитывайте, что on() не заменяет обработчик, а именно добавляет, а при нажатии на кнопку вызовутся все назначенные обработчики.

Comments

[Сергей БАрд]

пробовал и так

$('#add_report').on('click', function(event) {
	event.preventDefault();
	$('#blockForLoadfunction').empty();
	$('#blockForLoadfunction').load('" . Url::to(['/project-group-report/load']) . "');
});

и так

$('#add_report').click(function(event){
	event.preventDefault();
	$('#blockForLoadfunction').empty();
	$('#blockForLoadfunction').load('" . Url::to(['/project-group-report/load']) . "');
});

и так же добавлял event.stopPropagation(); как написали выше, но ситуация прежняя, или может я не туда добавляю его?)

[Rsa97]

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

Answer 3

[Евгений Бухарев]

Дело в том что инициализируя PJAX на форму вешается обработчик отправки формы, вешается он делегировано тоесть через $(document).on(...), поэтому при каждой загрузке снова и снова навешиваются обработчики, посмотреть код можно в панели разработчика, в ответе сервера как правило в самом конце есть блок

Comments

[Сергей БАрд]

что-то я не понимаю где в панели разработчика найти отчет сервера), можете пожалуйста подсказать?

[Евгений Бухарев]

Сергей БАрд,
Ответ, не отчет)

[Сергей БАрд]

Евгений Бухарев, кстати в FF работает норм и только в chrome не хочет, и продолжает слать кучу запросов за раз)