Вкратце: имеются несколько блоков, в каждой - кнопка отправки
AJAX запроса к серверу, и каждый блок, каждый запрос передает свои параметры, но суть одна и таже. Поэтому
JS отправки один для всех кнопок (блоков), адрес сервера один и тот же, и кнопки имеют один класс в html. Нажимается кнопка, идет отправка, потом вмето нее результат на основе ответа сервера. Если не спешить, все хорошо работает. Если не дожидаться результата одной кнопки и нажать другую, то как будто первый
ajax запрос обрывается, а второй начинает выполняться. Не очень большой опыт имеется, поэтому вопрос - что я делаю не так? :)
UPD.: Суть - кнопок .small_apply_button.multi_source несколько, просто каждая передает свой идентификатор, поэтому обработчик один. Нажимаю одну, быстренько нажимаю другую - первая перестает обрабатываться, зависает ajax запрос на этапе "Отправка...", начинает обрабатываться событие ajax по второй кнопке, ajax запрос успешно выполняется и показывает уже результат.
Проще говоря - этот код как буд-то не умеет работать одновременно с двумя элементами, только за второй возьмется - работа с первым тут же прервется...
добавил код, упроситил чуть, оставил только суть:
$('.small_apply_button.multi_source').click(function(e) {
e.preventDefault();
small_apply_button = $(this);
item = $(this).data('item');
if($('.intel_order_form').valid()){ // test for validity
data = $('.intel_order_form').serializeArray();
products = [item];
small_result = small_apply_button.parent().find('.small_result');
$.ajax({
url: '/backend/getm.php',
type: 'GET',
dataType: 'json',
data: {data: data, utms: result, products: products},
beforeSend: function() {
small_apply_button.hide(); // скрываем текущую кнопку при начале отправки
small_result.find('.waiting_result').show(); // показываем "Отправка..."
small_result.show();
},
complete: function() {
small_result.find('.waiting_result').hide(); // скрываем "Отправка..."
},
success: function(data) {
status = data[item];
if (status == 'accept') {
small_result.find('.success_result').fadeIn(200); // вместо кнопки - сообщение с успешным ответом от сервера
}
// тут были еще if else
else {
small_result.find('.reject_result').fadeIn(200); // другой вариант ответа сервера
}
},
error: function(data) { // когда сервер ошибкой ответил
console.log(data);
small_result.find('.reject_result').fadeIn(200);
},
});
return false;
} else {
return false;
}
});
