Question posted in
You can find the official documentation here.

Changing modal content breaks AJAX events – Jquery ajax

I use jquery-ujs for ajax requests (data-remote="true"). My problem is, that the first request is okay, and while the second is running, it breaks. Whenever I call in the events $('#modal').empty() or $('#modal').text('') or $('#modal').html(''), no more events are going to be called.

To be clear, here’s the code:

$(document).on('ajax:beforeSend', function () {
    console.log('beforeSend');
    $('#modal').empty().modal('show');
});

$(document).on('ajax:send', function () {
    console.log('send');
});

$(document).on('ajax:success', function (e, xhr) {
    console.log('success');
    $('#modal').html(xhr).drags({ handle: '.modal-header' }).modal('show');

    if (typeof doWork === 'function') {
        doWork();
    }
});

$(document).on('ajax:complete', function () {
    console.log('complete');
});

And the console output:

  • beforeSend
  • send
  • success
  • complete
  • beforeSend

If I move $('#modal').empty().modal('show'); to the send event, then it is going to be called, but the success method is never called anymore (neither error neither complete, nothing more).

This problem annoys me for more hours now… Thank you for your help.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    My workaround was to avoid using jquery-ujs events and using global ajax events, so my final working code is:

    $(document).ajaxSend(function () {
    $('#modal').empty().modal('show');
});

$(document).ajaxSuccess(function (e, xhr) {
    $('#modal').html(xhr.responseText).drags({ handle: '.modal-header' }).modal('show');

    if (typeof doWork === 'function') {
        doWork();
    }
});

  2. 0

    How about to move empty() to the ajax:complete?
    In this case, when your modal closes, it opens empty for the next use and is ready for reuse.
    I suggest that you put this command in the last step so that it does not cause any problems. Like the following:
    $(document).on('ajax:complete', function () { console.log('complete'); . . . . $('#modal').empty(); });
    I believe that this is not the best solution and there are definitely other solutions. But I hope this solution will solve your problem.

    Login or Signup to reply.
  3. 0 
    $('#modal').on('hidden.bs.modal', function () {
  $(this).empty()
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search