CODEWITHSUNDEEP
jquerydjango
Govind Shah
Govind Shah

Reputation: 81

Modal content refresh and submit

I have a use case where my modal loads some content from my DB. Now the same modal has a submit button to push additional text to the db.

As of now, my implementation: 1. Modal gets opened 2. Content gets displayed 3. The submit task does not close the modal ( manual submission through Jquery and prevent modal to close)

Now i need a way to refresh the updated modal content in this script without closing the Modal. I have tried location.reload(), it seems to refresh the entire page and then i need to open the modal again. Is there any solution?

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)

  })

Upvotes: 0

Views: 664

Answers (1)

Shridhar Sharma
Shridhar Sharma

Reputation: 2387

You should do it by creating a separate function to update the modal's content, like below

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

Upvotes: 1

Related Questions