stian.net stian.net - 1 month ago 40
Javascript Question

Reload content in modal (twitter bootstrap)

I'm using twitter bootstrap's modal popup.

<div id="myModal" class="modal hide fade in">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Header</h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<input type="submit" class="btn btn-success" value="Save"/>
</div>
</div>


I can load content using ajax with this a-element:

<a data-toggle="modal" data-target="#myModal" href="edit.aspx">Open modal</a>


Now I have to open the same modal but using a different url. I'm using this modal to edit an entity from my database. So when I click edit on an entity I need to load the modal with an ID.

<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=1">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=2">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=3">Open modal</a>


If I click on link number 1, it works fine. But if I then click on link number 2 the modal content is already loaded and therefor it will show the content from link number 1.

How can I refresh or reset the ajax loaded content in a twitter bootstrap modal popup?

Answer

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.