Twitter Bootstrap Modal Won't Load Content from Another ("Remote") Page

Short answer

You apparently need a skeleton [modal ... modal-body ... /modal] for your data-target, not just an empty modal with the data-target.

A Programmer's False Assumptions - The API is Broken or Old

Initially, I was concerned that my Rails plugin wasn't using a version of Bootstrap that didn't include the remote loading of a page into the modal (via href attribute). That functionality has only existed since 2.0.4.

However, when I checked the script being loaded into the project against the current bootstrap-modal.js on github, the MODAL DATA-API section was the same. Repeated checks of the javascript being loaded into my project confirmed that the code was up-to-date enough.

Maybe a Little Too Helpful

The forums discussing how to load remote content into a Bootstrap Modal suggested that the data-target div could be empty:
Original calling page sample:
The contents of the calling page div never changed.

<a class="btn small" href="/stuff/1/edit" data-toggle="modal" data-target="#editstuff">Settings...</a>
.
.
.
<div id="editstuff" class="modal hide">This should not display</div>

"Remote" page sample

...extra code here...
<div id="editstuff" class="modal hide">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Remote header</h3></div>
<div class="modal-body">Actual edit stuff</div>
<div class="modal-footer"><button class="btn" data-dismiss="modal">Cancel</button> <!-- just a sample --> 
<button class="btn" data-dismiss="modal">Close</button> 
<button id="save_btn" class="btn btn-primary">Save changes</button></div>
</div>
...extra code here...

What Was Really Happening

The documentation states that, "If a remote url is provided, content will be loaded via jQuery's load method and injected into the .modal-body."

From there, I put a stub modal-body in my calling page's modal and discovered that modal-header, modal-body, and modal-footer appeared to be getting replaced now!
New calling page:

<div id="editstuff" class="modal hide">
<div class="modal-body"><!-- content will be loaded here --></div>
</div>

5 Replies to “Twitter Bootstrap Modal Won't Load Content from Another ("Remote") Page”

  1. I'm using Bootstrap 2.1.x in this case--it appears older versions may not work.

    Also, the outer modal class should be removed--otherwise the number of backdrops will double every time the modal is shown.

  2. Just noticed my response is missing. Not sure why, but trying it now with an updated version of Disqus.

    I'm using Bootstrap 2.1.x in this case--it appears older versions may not work.

    Also, the outer modal class should be removed--otherwise the number of backdrops will double every time the modal is shown.

Comments are closed.