How to update the remote content of a Modal in Twitter Bootstrap

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.

12 thoughts on “How to update the remote content of a Modal in Twitter Bootstrap

  1. avatarHouston Erickson

    method will be used to insert content into the dom. Use text if you’re worried about XSS attacks.

    Reply
  2. avatarTom

    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(”);
    });

    Reply
    1. avatarwawan

      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

      Reply
  3. avatarcoredumponline

    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.

    Reply
  4. avatarManoj

    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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *