LBF LBF - 4 months ago 17x
jQuery Question

Load specific external content in bootstrap 3 modal

Is it possible to load external content from a specific div into a Bootstrap 3.3.x Modal?

Here's my setup:

Page 1 =
, which will open the modal.

Page 2 =
, which has a div named

Can I load the content from
into the modal on Page 1?

I've found info on loading a full external page into the modal, but I really need to load only the content from a specific div.

I pieced together this bit of ajax for loading a specific element, but I'm not sure how to integrate it with the bootstrap modal (or if it's even the best way to do this).

url: '',
dataType: 'html',
success: function(html) {
var div = $('#bio', $(html)).addClass('done');

Thanks for any help.


You can use .load()

Loading Page Fragments

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

We could modify the example above to use only part of the document that is fetched:

$( "#result" ).load( "ajax/test.html #container" );

$(".modal-content").load(" #bio"
, function(html, textStatus, jqxhr) {
  // do stuff when `#bio` element at ``
  // loaded as `html` of `.modal-content`