Twitter Bootstrap is a very good tool with beautiful graphics and lots of tiny useful objects.
The Modal object is nice and lightweight, and is also able to load remote content. I liked it and wanted to use it on a list of links, loading new content every time a link was pressed.
The problem
Unfortunately, I found that the Modal remote content load feature works only the first time the object is used! Once a Modal object is instantiated, it is persistently attached to the element specified by data-target; subsequent calls to show it will only call toggle() on it, but will not update its content. This is because the remote load is done in the constructor of the Modal object, so even changing its properties, the content won’t be updated.
The Bootstrap guys, when asked on this matter some months ago, said that this wasn’t a bug from their point of view, so the Modal behavior wouldn’t be changed in the future.
For a particular project, I didn’t want to create a lot of static Modals (one for every link) to store all the data, so I figured out a way to use just one Modal object and override its contents dynamically.
The solution
My quick&dirty solution was to inject the remote content directly on the modal-body CSS class of the Modal object, with a jQuery Load call put on every link.
Sample code before (from the Bootstrap online documentation):
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
Sample code after:
<a href="javascript:$('#modal .modal-body').load('remote.html',function(e){$('#modal').modal('show');});">Click me</a>
The code works both on Bootstrap 2 and Bootstrap 3. It’s rough but it’s also a working base for future refinements.
method will be used to insert content into the dom. Use text if you’re worried about XSS attacks.
Thanks , the remote modal trick was real sweet !!
In Bootstrap 3 I just use the following to remove the data from my modal and insert a loading gif – just in case it takes a second or two to load the content. In Bootstrap 2 you would need to replace “hidden.bs.modal” with just “hidden” and “bs.modal” with just “modal”
$(‘body’).on(‘hidden.bs.modal’, ‘#editModal’, function () {
$(this).removeData(‘bs.modal’);
$(this).find(“.modal-body”).html(”);
});
Very clever, Tom! Thanks for sharing!
Hi Tom,
I spent around 4 hours to solve this issue. on my last code i just use $(this).data(‘modal’,null’) and fine…
you save my times…
thk a lot
THANK YOU SO MUCH!!! Have yourself a very good day
can i create button inside a frame for close the modal???
Thanks a lot, this was very helpful.
To be even more precise, you can mention that must be adapted to the way is the modal is named and designed. For example, for me, it was : #myModal, and I had to replace .modal-content instead of .modal-body.
Add void(0); to run in firefox without opening a black window with you javascript.
I have Modal in that i had a button which opens another Modal after saving and closing that Modal main Modal should automatically refresh but now it not happening If I use location.reload() both modals are closing and entire page is refreshing..Please suggest me a solution
awesome, thanks for sharing 🙂
no solution works for me