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

Question

У меня есть случай, когда мой модал загружает некоторый контент из моей БД.Теперь тот же модал имеет кнопку отправки для добавления дополнительного текста в БД.

На данный момент моя реализация: 1. Модальное открывается 2. Содержимое отображается 3. Задача отправки не закрывает модальное (ручная отправка через Jquery и предотвращает закрытие модального)

Теперь мне нужен способ обновить обновленный модальный контент в этом скрипте, не закрывая модальный.Я попытался location.reload (), кажется, чтобы обновить всю страницу, а затем мне нужно снова открыть модальное.Есть ли решение?

JQUERY:

$('#chatbox').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var recipient = button.data('whatever')
$.ajax({
    url: "{% url 'fetcher' %}",
    type: "GET",
    data: {
      'search': recipient
    },
    dataType: 'json',
    success: function (data) {
        list = data.list;
        var id = data.id;
        $('#chatbox').find('.modal-body').text(list);
        $( "form" ).submit(function( event ) {

        var formData = $('#formid').serialize()
            $.post("/usercreation/addmessage/"+ id, formData, function (response) {
               console.log('report sent');
               $("#formid .input").html("");
               location.reload();
           })
      event.preventDefault();
      });
  }

  });
  var modal = $(this)
  modal.find('.modal-title').text('Chat with ' + recipient)

  })

Answer 1

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

var button, modalData;

function updateModal(button) {
  var recipient = button.data('whatever')
  $.ajax({
    url: "{% url 'fetcher' %}",
    type: "GET",
    data: {
      'search': recipient
    },
    dataType: 'json',
    success: function(data) {
      modalData = data;
      list = data.list;
      var id = data.id;
      $('#chatbox').find('.modal-body').text(list);
    }
  });
  var modal = $(this)
  modal.find('.modal-title').text('Chat with ' + recipient)
}

$('#chatbox').on('show.bs.modal', function(event) {
  button = $(event.relatedTarget)
  updateModal(button)
}).on("submit", "form", function(event) {
  event.preventDefault();
  var form = event.target;
  var formData = $(form).serialize()
  var id = modalData.id;
  $.post("/usercreation/addmessage/" + id, formData, function(response) {
    console.log('report sent');
    form.reset();
    updateModal(button)
  })
});