Удалить форму перед отправкой
У меня есть страница, которая загружает разделы через AJAX
Например:
<!-- Email Section -->
<div id=\"email-container\" class=\"body-container hidden\">
</div>
<!-- Users Section -->
<div id=\"user\" class=\"body-container hidden\">
</div>
<!-- File-Upload Section -->
<div id = "upload-container" class = "body-container hidden">
</div>
Когда пользователь нажимает на ссылку, «старый» раздел исчезает, а появляется «новый». «Новый» раздел загружается и перезаписывает любые данные, которые могли быть там раньше ...
function showSection(section, link) {
$(".body-container").addClass('hidden');
$("#" + section + "-container").removeClass('hidden');
$(".menu-item").removeClass('current-menu-item');
$("#" + link).addClass('current-menu-item');
var jqxhr = $.get("./sections/" + section)
.done(function (response) {
$("#" + section + "-container").html(response);
})
.fail(function () {
// blah
});
В разделе загрузки у меня есть форма, и она отправляется через AJAX.
$(document).on('submit', '#upload', function() {
var form_data = new FormData(this);
$.ajax({
url: 'upload.php',
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(response){
// do stuff with response. Don't care if it fails for now
}
});
return false;
});
Моя проблема в том, что если я загружаю эту страницу загрузки более одного раза, создается более одной формы, и поэтому одна и та же информация отправляется и загружается несколько раз.
Как я могу удалить старые формы, которые были созданы ранее, чтобы только ОДНА форма отправлялась каждый раз, когда пользователь нажимает «отправить», независимо от того, сколько раз был загружен раздел?
Заранее спасибо.
Если мне чего-то не хватает, да, он каждый раз заменяет HTML. Допустим, на загруженной странице есть пустая текстовая область, и я помещаю что-то в эту текстовую область, а затем щелкаю ссылку, чтобы «перезагрузить» страницу. Весь текст уходит. В основном, раздел начинается с нуля, и я не могу найти остатков «старого» раздела. Но кажется, что эта форма сохраняется, и я не знаю почему.
@David, чтобы добавить больше к этому последнему комментарию ... когда я нажимаю "Отправить", данные на странице в настоящее время отправляются. Если я загрузил этот раздел 3 раза, данные будут отправлены 3 раза. Если я обновляю всю страницу и загружаю раздел загрузки (только один раз), данные отправляются один раз. Это ответ на ваш вопрос, или я неправильно понял?
Когда вы говорите, что данные отправляются трижды, вы имеете в виду один запрос AJAX с тремя формами данных (все разные)? Три запроса AJAX с тремя разными наборами данных? Три запроса AJAX с одинаковым набором данных? Что-то другое? Кроме того, загружается ли этот код jQuery AJAX на страницу один раз? Или каждый раз, когда загружается эта «секция»? В последнем случае каждый раз будет создаваться новый обработчик событий.
@David отправляет ОДИНАКОВЫЕ данные - все, что в данный момент находится в форме раздела. Да, этот раздел загружается каждый раз, он находится в разделе загрузки. Я не думал, что проблема в этом ... позвольте мне попробовать поместить это на главную страницу и посмотреть, что произойдет.
@ Дэвид Ага, вот и все. Просто из любопытства, есть ли способ уничтожить старый обработчик, чтобы я мог оставить этот код в этом разделе и НЕ иметь этой проблемы? Пожалуйста, отправьте ответ, и я отмечу его как правильный.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Судя по комментариям к вопросу, похоже, что корень проблемы в следующем:
$(document).on('submit', '#upload', function() {
//...
});
Поскольку это часть содержимого, загружаемого через AJAX, он выполняется каждый раз при загрузке содержимого. В частности, это добавляет обработчик submit к элементу document. Таким образом, каждый раз при загрузке контента добавляется еще один обработчик submit. Когда все эти обработчики выполняются, все они делают одно и то же.
Если вы В самом деле хотите, чтобы обработчик был включен в контент, привяжите его напрямую к элементу:
$('#upload').on('submit', function() {
//...
});
Пока элемент #upload уничтожается и каждый раз при загрузке контента создается новый, любые обработчики, прикрепленные к этому элементу, также будут уничтожены.
Однако я честно рекомендую другой подход. Отделите функциональность от содержания. Сохраните обработчик submit на document, как он уже есть, но переместите этот код на общую «родительскую» страницу, а не в динамически загружаемое содержимое. Таким образом, он выполняется только один раз при загрузке страницы и не требует повторного выполнения.
Обновляйте содержание сколь угодно часто, но определяйте общий функциональность один раз.
Это именно то, что он делает:
$("#" + section + "-container").html(response);Он заменяет существующий HTML в этом элементе новым HTML. Вы можете это проверить? Дважды «загрузить» раздел «загрузка». Какой именно HTML-код возвращался с сервера каждый раз? Каково конечное состояние DOM после каждого из них? Что в конечном итоге содержит каждый AJAX POST из формы отправки?