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...
.
.
.
“Remote” page sample
...extra code here...
...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:
5 responses to “Twitter Bootstrap Modal Won’t Load Content from Another (“Remote”) Page”
still doesn’t work.
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.
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.
This was driving me crazy.
Thank you!
Txh, finaly great solution.