13

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

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

is making use of the jQuerys' .load only loading the content once. It injects the content in the modal-content div. As previously stated the content of this modal can be changed at any given time and therefore I need a different method. Any ideas?

TL;DR - I'm looking for a method that will load dynamic content (remote) every time the modal opens instead of once (default Bootstrap modal).

captainsac
  • 2,484
  • 3
  • 27
  • 48
KaekeaSchmear
  • 1,548
  • 5
  • 18
  • 30

3 Answers3

13

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

Stephen Thomas
  • 13,843
  • 2
  • 32
  • 53
11

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.

cvrebert
  • 9,075
  • 2
  • 38
  • 49
3

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>
jakealbaugh
  • 256
  • 1
  • 7
  • Using this way the dialog will not be shown, because method .modal is not defined for type Object. I tried using this: which will show the dialog, but content will only be updated if i click on the icon and not in the entire button. – smihael May 27 '14 at 09:14