Reload content in modal (twitter bootstrap)

Solution 1:

I am having the same problem, and I guess the way of doing this will be to remove the data-toggle attribute and have a custom handler for the links.

Something in the lines of:

$("a[data-target=#myModal]").click(function(ev) {
    ev.preventDefault();
    var target = $(this).attr("href");

    // load the url and show modal on success
    $("#myModal .modal-body").load(target, function() { 
         $("#myModal").modal("show"); 
    });
});

Will try it later and post comments.

Solution 2:

To unload the data when the modal is closed you can use this with Bootstrap 2.x:

$('#myModal').on('hidden', function() {
    $(this).removeData('modal');
});

And in Bootstrap 3 (https://github.com/twbs/bootstrap/pull/7935#issuecomment-18513516):

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

//Edit SL: more universal
$(document).on('hidden.bs.modal', function (e) {
    $(e.target).removeData('bs.modal');
});

Solution 3:

You can force Modal to refresh the popup by adding this line at the end of the hide method of the Modal plugin (If you are using bootstrap-transition.js v2.1.1, it should be at line 836)

this.$element.removeData()

Or with an event listener

$('#modal').on('hidden', function() {
    $(this).data('modal').$element.removeData();
})

Solution 4:

With Bootstrap 3 you can use 'hidden.bs.modal' event handler to delete any modal-related data, forcing the popup to reload next time:

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

Solution 5:

Based on other answers (thanks everyone).

I needed to adjust the code to work, as simply calling .html wiped the whole content out and the modal would not load with any content after i did it. So i simply looked for the content area of the modal and applied the resetting of the HTML there.

    $(document).on('hidden.bs.modal', function (e) {
        var target = $(e.target);
        target.removeData('bs.modal')
              .find(".modal-content").html('');
    });

Still may go with the accepted answer as i am getting some ugly jump just before the modal loads as the control is with Bootstrap.