Как очищать модальное окно при вызове через ajax?
Добрый день, есть форма в модальном окне, в форму подтягиваю данные из бд через ajax, проблема в том, что если вызвать модалку несколько раз подряд, то она не очищается и будет дублировать данные из бд при каждом ее вызове. Как можно это исправить?
Дополнительно:
Ответы:
Либо в beforeSend добавь, либо перед "подтягиванием" данных добавь сброс формы. Если ajax юзается через jquery, то что-то типа $('form').trigger('reset'); Если вдруг на чистом js, то document.Form.reset();
где в обоих случаях просто замени идентификатор формы $('form') / Form на свое
-
$.ajax({ type: "GET", url: "ds.php", data: "id=" + id, dataType: 'json', success: function(data){ $('#ajax_form').trigger('reset'); //получение ответа, форма
$.ajax({ type: "GET", url: "ds.php", data: "id=" + id, dataType: 'json', success: function(data){ $('#ajax_form').trigger('reset'); //получение ответа, форма
пытался, но так же не работает или я все неверно делаю
- сделал так:
var e= document.getElementById('ajax_form');
иbeforeSend: function() { elem.trigger('reset'); },
beforeSend: function() { elem.trigger('reset'); },
теперь сразу же удаляет форму не прогрузив ее
- uwu79, Зачем перед отправкой-то?
Сначала отправили, потом очистили. У формы (HTMLFormElement) есть метод reset(), который прекрасно очищает форму до начальных значений.
Опять же, после отправки может возникнуть ситуация, когда данные не прошли валидацию и сервер сказал - "поправь там немного данные", а вы их уже очистили.
Тогда форму можно очищать либо при открытии модального окна, либо по его закрытию. - Сергей delphinpro, пытался с reset(), но так же не работает
сделал так:
var elem = document.getElementById('form');
по очереди проверял в beforeSend, complete, success, но нигде не сработало elem.reset(); - uwu79, не надо тыкать наугад. Нужно понять как что работает и сделать один раз правильно.
Не может не работать то что работает десятки лет.https://codepen.io/delphinpro/pen/QWPjPEe?editors=1010
В консоль заглядывали? Слово "отладка" знакомо?
- Сергей delphinpro, саму суть я понял, но пока что не понимаю как это реализовать, нужно очистить форму при закрытии, но как мне поймать это закрытие формы? она у меня в модалке
- uwu79, смотря какие модалки. У бутстраповских, например, есть события срабатывающие на отрытие или закрытие, на них можно подписаться.
Да и в любой другой есть код, который закрывает модалку.
- Сергей delphinpro, уже нашел как отследить, у меня две разные модалки, на одной очищает без проблем, с другой разбираюсь
- со второй модалкой так и не получилось, получается у меня есть таблица с записями, при редактировании какой то из записей открывается модалка с записями, если ее закрыть и открыть другую запись на редактирование, то в модальном окне будут записи уже двух полей, детали полей подтягиваю через ajax, может так будет понятнее в чем может быть проблема((
- uwu79, а вторая форма обернута в тег form? И если обе модалки находятся на "одной странице", то они имеют разные id?
- zmrzjke, да, все как положено, с разными id, думаю что что то накосячил в ajax при получении ответа, просто я прям там добавляю инпуты к форме
думаю так будет понятнее:<form id="ajax_form" action="" method="post"> </div> <div class="modal-footer"> <button type="submit" id ="btn_edit" class="btn btn-primary">Сохранить</button> </div> </form>
<form id="ajax_form" action="" method="post"> </div> <div class="modal-footer"> <button type="submit" id ="btn_edit" class="btn btn-primary">Сохранить</button> </div> </form>
ajax:
$.ajax({ type: "GET", url: "ds.php", data: "id=" + id, dataType: 'json', success: function(data){ $("#ajax_form").html( $("#ajax_form").html()+'<div class="mb-3">' +'<label for="recipient-name" class="col-form-label">ФИО:</label>' +'<input type="text" name="fio" value='+data.fio+' class="form-control " id="recipient-name"> </div>'
$.ajax({ type: "GET", url: "ds.php", data: "id=" + id, dataType: 'json', success: function(data){ $("#ajax_form").html( $("#ajax_form").html()+'<div class="mb-3">' +'<label for="recipient-name" class="col-form-label">ФИО:</label>' +'<input type="text" name="fio" value='+data.fio+' class="form-control " id="recipient-name"> </div>'
- uwu79, ты после запроса пытаешься вставить в модальное окно все старые данные из модального окна + новые данные, т.е. твои поля вставляются уже после закрывающего тега form, так как заново впихиваешь ВСЮ форму, а затем новые поля. Плюс при повторном запросе, они начинают нарастать друг на друге. После from отшельнеческий закрывающий тег div. Если прям вот вынь выложь нужно добавлять инпуты после запроса, то хотя бы добавь обертку для вставляемых данных и именно эту обертку и перезаписывай.
<form id="ajax_form" action="" method="post"> <div class="update_block"> //Сюды будет впихиать пришедшие данные </div> <div class="modal-footer"> <button type="submit" id ="btn_edit" class="btn btn-primary">Сохранить</button> </div> </form>
<form id="ajax_form" action="" method="post"> <div class="update_block"> //Сюды будет впихиать пришедшие данные </div> <div class="modal-footer"> <button type="submit" id ="btn_edit" class="btn btn-primary">Сохранить</button> </div> </form>
let af = $("#ajax_form"); af.find('.update_block').html( '<div class="mb-3">' +'<label for="recipient-name" class="col-form-label">ФИО:</label>' +'<input type="text" name="fio" value='+data.fio+' class="form-control " id="recipient-name">' +'</div>' );
let af = $("#ajax_form"); af.find('.update_block').html( '<div class="mb-3">' +'<label for="recipient-name" class="col-form-label">ФИО:</label>' +'<input type="text" name="fio" value='+data.fio+' class="form-control " id="recipient-name">' +'</div>' );
Но если прям вообще ничего нельзя менять в исходнике, то может быть вот так
let af = $("#ajax_form"); let m = af.find('.modal-footer'); m.children().not('button').remove(); m.prepend( '<div class="mb-3">' +'<label for="recipient-name" class="col-form-label">ФИО:</label>' +'<input type="text" name="fio" value='+data.fio+' class="form-control " id="recipient-name">' +'</div>' );
let af = $("#ajax_form"); let m = af.find('.modal-footer'); m.children().not('button').remove(); m.prepend( '<div class="mb-3">' +'<label for="recipient-name" class="col-form-label">ФИО:</label>' +'<input type="text" name="fio" value='+data.fio+' class="form-control " id="recipient-name">' +'</div>' );
Хотя это извращение какое-то
- zmrzjke, спасибо большое, работает, вроде понял, но не совсем), можете пожалуйста объяснить по подробнее как это работает? почему сейчас они перезаписываются, а раньше просто нарастали друг на друге?
- на счет извращения согласен, но пока что не смог придумать что то путное)
- uwu79, потому что ты в модальное $("#ajax_form") вставляешь это же модальное целиком в секущем состоянии $("#ajax_form").html( $("#ajax_form").html() ) т.е. выходит так что модальное окно перезаписывается в себя же, а потом к нему присобачиваются input поля.
Т.е. было
<form id="ajax_form" action="" method="post"> <div class="modal-footer"> <button type="submit" id ="btn_edit" class="btn btn-primary">Сохранить</button> </div> </form>
<form id="ajax_form" action="" method="post"> <div class="modal-footer"> <button type="submit" id ="btn_edit" class="btn btn-primary">Сохранить</button> </div> </form>
а после первой "перезаписи" стало
<form id="ajax_form" action="" method="post"> <div class="update_block"> //Сюды будет впихиать пришедшие данные </div> <div class="modal-footer"> <button type="submit" id ="btn_edit" class="btn btn-primary">Сохранить</button> </div> </form> <div class="mb-3"> <label for="recipient-name" class="col-form-label">ФИО:</label> <input type="text" name="fio" value='+data.fio+' class="form-control " id="recipient-name"> </div>
<form id="ajax_form" action="" method="post"> <div class="update_block"> //Сюды будет впихиать пришедшие данные </div> <div class="modal-footer"> <button type="submit" id ="btn_edit" class="btn btn-primary">Сохранить</button> </div> </form> <div class="mb-3"> <label for="recipient-name" class="col-form-label">ФИО:</label> <input type="text" name="fio" value='+data.fio+' class="form-control " id="recipient-name"> </div>
Во второй итерации, в модальное окно опять себя перезаписывает, но в нем уже имеются поля после первой итерации. И на второй раз добавляются уже по новой поля, при этом сохраняются старые. И результат будет уже вот такой
<form id="ajax_form" action="" method="post"> <div class="update_block"> //Сюды будет впихиать пришедшие данные </div> <div class="modal-footer"> <button type="submit" id ="btn_edit" class="btn btn-primary">Сохранить</button> </div> </form> <div class="mb-3"> <label for="recipient-name" class="col-form-label">ФИО:</label> <input type="text" name="fio" value='+data.fio+' class="form-control " id="recipient-name"> </div> <div class="mb-3"> <label for="recipient-name" class="col-form-label">ФИО:</label> <input type="text" name="fio" value='+data.fio+' class="form-control " id="recipient-name"> </div>
<form id="ajax_form" action="" method="post"> <div class="update_block"> //Сюды будет впихиать пришедшие данные </div> <div class="modal-footer"> <button type="submit" id ="btn_edit" class="btn btn-primary">Сохранить</button> </div> </form> <div class="mb-3"> <label for="recipient-name" class="col-form-label">ФИО:</label> <input type="text" name="fio" value='+data.fio+' class="form-control " id="recipient-name"> </div> <div class="mb-3"> <label for="recipient-name" class="col-form-label">ФИО:</label> <input type="text" name="fio" value='+data.fio+' class="form-control " id="recipient-name"> </div>
и так по нарастающей
Вот участок кода из рабочего проекта:
$('#addCient').click(function(){ $('#clientModal').modal('show'); $('#clientForm')[0].reset(); $('#action').val('addClient'); $('#save').val('Add'); }); |
$('#addCient').click(function(){ $('#clientModal').modal('show'); $('#clientForm')[0].reset(); $('#action').val('addClient'); $('#save').val('Add'); });
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для очистки модального окна при вызове через AJAX, вам необходимо выполнить следующие шаги:
1. Создайте функцию, которая будет очищать содержимое модального окна. Например, вы можете использовать следующий код на JavaScript:
```html
function clearModal() {
$('#myModal').find('.modal-body').empty();
}
```
2. В вашем скрипте, который загружает контент через AJAX, вызовите эту функцию после успешной загрузки данных. Например, если вы используете jQuery для отправки запросов AJAX, то ваш код может выглядеть так:
```html
$.ajax({
url: 'your-url.php',
type: 'GET',
success: function(response) {
$('#myModal').find('.modal-body').html(response);
clearModal(); // вызов функции очистки модального окна
},
error: function() {
alert('Ошибка при загрузке данных.');
}
});
```
3. Убедитесь, что ваш модальное окно имеет правильную структуру HTML. Например:
```html
Мой модальный заголовок
```
После выполнения этих шагов, при каждом вызове модального окна через AJAX, его содержимое будет очищаться перед загрузкой новых данных, что позволит избежать накопления старого контента. Надеюсь, это поможет вам решить проблему с очисткой модального окна при вызове через AJAX.