在bootstrap 3 modal中加载特定的外部内容

Question

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

Here's my setup:

Page 1 = mywebsite.com/doctors , which will open the modal.

Page 2 = mywebsite.com/doctors/john-doe , which has a div named #bio .

Can I load the content from #bio 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).

$.ajax({
    url: 'mywebsite.com/doctors/john-doe',
    dataType: 'html',
    success: function(html) {
        var div = $('#bio', $(html)).addClass('done');
        $('.modal-content').html(div);
    }
});

Thanks for any help.

Answer 1

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("mywebsite.com/doctors/john-doe #bio"
, function(html, textStatus, jqxhr) {
  // do stuff when `#bio` element at `mywebsite.com/doctors/john-doe`
  // loaded as `html` of `.modal-content`
});

Answer 2

I think you're in the right path.

You'll have to inject this ajax html content received from mywebsite.com/doctors/john-doe into the dialog's modal-body .

Bootstrap modal dialog html structure:

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

So, one approach is something like that: (1) open dialog with an loading spinner, (2) trigger this ajax request (3) in the success callback call $('.modal-body').html to set this div content with the received response.

Partial content

One option of parsing received html content is to put your html inside jQuery constructor, like var content = $(received_html); . Then you cand find your desired div with content.find('#myDiv'); .