Code, Strings, and Keys

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.

Settings...
.
.
.
This should not display

“Remote” page sample

...extra code here...


×
Remote header
Actual edit stuff
Cancel  
Close 
Save changes

...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: