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

  1. Dave Alvarez

    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
  2. Bob

    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
  3. Nils

    I’ve been trying to resolve this issue all night and your script did the job beautifully, first try. Thanks so much for posting this!

    Reply
  4. Daniel Caze

    Dude, thanks a lot! only here i found the correct code! after cames here, i lost a noon googling… [sorry by my bad English]

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *