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.
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.
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:
The code works both on Bootstrap 2 and Bootstrap 3. It’s rough but it’s also a working base for future refinements.