Bootstrap Modal Dynamic Content

Question

I\'m in need of a method to load dynamic content that can change at any time. According to the Bootstrap documentation

相关标签:

Answer 1

this guy has a dirty but working solution: http://www.whiletrue.it/how-to-update-the-content-of-a-modal-in-twitter-bootstrap/

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

becomes:

<a href="javascript:$('#modal .modal-body').load('remote.html',function(e){$('#modal').modal('show');});">Click me</a>

Answer 2

You can properly clear the modal's cache using:

$('#your-modal').removeData('bs.modal');

See https://github.com/twbs/bootstrap/pull/7935#issuecomment-21166069
You'd probably want to do that in an event handler for the modal's hidden.bs.modal event.

Though you're probably better off using client-side templating and a little custom JavaScript to load the necessary data, instead of using data-remote in the first place. Especially since Bootstrap has deprecated the remote modal option.

Answer 3

If your users can tolerate the delay, reload the content whenever the show event occurs.

$('#modal').on('show.bs.modal', function(){
    $.get("remote.htm", function(data){
        $('#modal').find('.modal-content').html(data);
    })
})

Add error handling and parameters as needed