Bootstrap Modal – load remote url multiple times

If you’re using Bootstrap 3.x to generate a remote link based modal, you’ll notice that re-clicking the same link does not re-request the content of the remote URL and instead just re-displays the same content from the previous load.

This isn’t a great result in many cases (forms for new objects for instance). To resolve this issue do the following:

$(document).ready(function(){
  $('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
  });
});

This allows you to request the remote URL multiple times and refresh the modal on each request. However, it will still blink with the old data. To resolve this you can do the following:

$(document).ready(function(){
  $('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
    $("#" + $(this).attr("id") + " .modal-content").empty();
    $("#" + $(this).attr("id") + " .modal-content").append("Loading...");
  });
});

You could use the JQuery ‘html’ method instead of empty() + append(), however I’ve noticed versions of IE less than 9 choke on the html method in this context. I personally think IE should be sent back to the hell fire whence it was sprung….but if you need it to work, then you’ll need to use the method above.

7 thoughts on “Bootstrap Modal – load remote url multiple times”

Dave Alvarez October 30, 2014 at 1:27 am

Thanks for posting this! Just a tip for readers, if you copy and paste the code above you will receive an illegal character error. I couldn’t figure out what in the world was going on until I realized that the code snippet had left and right quote characters instead of the standard quotes we use when programming.

Reply ↓

Bob November 15, 2014 at 8:45 pm

Perfect, exactly what I needed and solved an aggravating problem. Like the other reader said, I just had to replace the left/right quotes and I was good to go!

Reply ↓