Как очищать модальное окно при вызове через ajax?

Question

[uwu79]

Добрый день, есть форма в модальном окне, в форму подтягиваю данные из бд через ajax, проблема в том, что если вызвать модалку несколько раз подряд, то она не очищается и будет дублировать данные из бд при каждом ее вызове. Как можно это исправить?

Answer 1

[zmrzjke]

Либо в beforeSend добавь, либо перед "подтягиванием" данных добавь сброс формы. Если ajax юзается через jquery, то что-то типа $('form').trigger('reset'); Если вдруг на чистом js, то document.Form.reset();
где в обоих случаях просто замени идентификатор формы $('form') / Form на свое

Comments

[uwu79]

$.ajax({
			 type: "GET",
			 url: "ds.php",
			 data: "id=" + id,
			 dataType: 'json',
			 success: function(data){
			
				$('#ajax_form').trigger('reset');
				//получение ответа, форма

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

[uwu79]

сделал так:
var e= document.getElementById('ajax_form');
и

beforeSend: function() {
   elem.trigger('reset');
},

теперь сразу же удаляет форму не прогрузив ее

[Сергей delphinpro]

uwu79, Зачем перед отправкой-то?
Сначала отправили, потом очистили. У формы (HTMLFormElement) есть метод reset(), который прекрасно очищает форму до начальных значений.
Опять же, после отправки может возникнуть ситуация, когда данные не прошли валидацию и сервер сказал - "поправь там немного данные", а вы их уже очистили.
Тогда форму можно очищать либо при открытии модального окна, либо по его закрытию.

[uwu79]

Сергей delphinpro, пытался с reset(), но так же не работает
сделал так:
var elem = document.getElementById('form');
по очереди проверял в beforeSend, complete, success, но нигде не сработало elem.reset();

[Сергей delphinpro]

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

https://codepen.io/delphinpro/pen/QWPjPEe?editors=1010

В консоль заглядывали? Слово "отладка" знакомо?

[uwu79]

Сергей delphinpro, саму суть я понял, но пока что не понимаю как это реализовать, нужно очистить форму при закрытии, но как мне поймать это закрытие формы? она у меня в модалке

[Сергей delphinpro]

uwu79, смотря какие модалки. У бутстраповских, например, есть события срабатывающие на отрытие или закрытие, на них можно подписаться.

Да и в любой другой есть код, который закрывает модалку.

[uwu79]

Сергей delphinpro, уже нашел как отследить, у меня две разные модалки, на одной очищает без проблем, с другой разбираюсь

[uwu79]

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

[zmrzjke]

uwu79, а вторая форма обернута в тег form? И если обе модалки находятся на "одной странице", то они имеют разные id?

[uwu79]

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>

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>'

[zmrzjke]

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>

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>'
);

Хотя это извращение какое-то

[uwu79]

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

[uwu79]

на счет извращения согласен, но пока что не смог придумать что то путное)

[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="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>

и так по нарастающей

Answer 2

[Алексей Денисов]

Вот участок кода из рабочего проекта:

$('#addCient').click(function(){
$('#clientModal').modal('show');
$('#clientForm')[0].reset();
$('#action').val('addClient');
$('#save').val('Add');
});