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

模态内容刷新并提交

1 个答案: