Twitter Bootstrap Modal Won’t Load Content from Another (“Remote”) PagePosted: November 3, 2012 | Author: tech0x20 | Filed under: web development | Tags: bootstrap, html, modal, problem-solving, twitter | 5 Comments »
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.
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......extra code here...
Remote headerActual edit stuff
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: