Load content with ajax in bootstrap modal

Question

I am trying to have my bootstrap modal retrieve data using ajax:

<a href="{{ path('ajax_get_messages', { 'superCategoryID': 35, 'sex': sex }) }}" data-toggle="modal" data-target="#birthday-modal">
  <img src="{{ asset('bundles/yopyourownpoet/images/messageCategories/BirthdaysAnniversaries.png') }}" alt="Birthdays" height="120" width="109"/>
</a>

My modal:

<div id="birthday-modal" class="modal hide fade">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Birthdays and Anniversaries</h3>
</div>
<div class="modal-body">

</div>
<div class="modal-footer">
    <a href="#" data-dismiss="modal" class="btn">Close</a>
    {#<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>#}
</div>
</div>

When I click on the link, the modal is shown but the body is empty. Besides, I don't see any ajax request being made. I am using Bootstrap 2.1.1

What am I doing wrong?

marcovtwout · Answer 1 · 2021-01-25T14:00:38.967

40

The top voted answer is deprecated in Bootstrap 3.3 and will be removed in v4. Try this instead:

JavaScript:

// Fill modal with content from link href
$("#myModal").on("show.bs.modal", function(e) {
    var link = $(e.relatedTarget);
    $(this).find(".modal-body").load(link.attr("href"));
});

Html (Based on the official example. Note that for Bootstrap 3.* we set data-remote="false" to disable the deprecated Bootstrap load function):

<!-- Link trigger modal -->
<a href="remoteContent.html" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-default">
    Launch Modal
</a>

<!-- Default bootstrap modal example -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <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" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </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>
  </div>
</div>

Try it yourself: https://jsfiddle.net/ednon5d1/

edited Jan 25 '21 at 14:00

answered Dec 31 '14 at 09:04

marcovtwout

5,230
4
36
45

1

I have a page that list hundreds of order records which all need to load content into a Modal using AJAX request. THis method loads my first record clicked on but after that it just keeps showing modal with previous loaded data instead of making new AJAX request to update with new clicked on record. Any ides? – JasonDavis Jun 15 '15 at 20:39
Is the modal still open when you click one of the other links? This javascript handler triggers the request when the modal is shown. In your case you might have to rewrite it and use a click handler for example. – marcovtwout Jun 16 '15 at 08:20
This triggers 2x ajax calls in Bootstrap v3. One for the original Modal AJAX load - and one for your `show.bs.modal` event (which is fired *after* the original ajax call). – Laurence Aug 06 '15 at 01:57
Thanks for noticing this. The official docs weren't very clear here - I now specifically disabled the original load through data-remote="false" and added a JSfiddle. In Bootstrap 4 this should no longer be needed. – marcovtwout Aug 06 '15 at 14:16
I found that I had to add `$(document).on("click", '[data-toggle="modal"]', function (e) { e.preventDefault(); });` to prevent the browser sending the get request on the href as well as the ajax call – Colin Apr 15 '16 at 15:41
@Colin in which browser and what bootstrap version was this? I cannot reproduce your problem in the fiddle (https://jsfiddle.net/ednon5d1/) – marcovtwout Apr 18 '16 at 07:35
@marcovtwout terrific!!! works with my ajax content now. Huge thanks!!! – user2513846 Jul 18 '16 at 15:07

score 27 · Answer 2 · answered Sep 08 '13 at 18:34

27

Easily done in Bootstrap 3 like so:

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

answered Sep 08 '13 at 18:34

Chris Villa

3,901
1
18
10

1

Also available in 2.3.2 with the same syntax. – Arkan Jan 05 '14 at 12:00
Could you give an example of the expected response when calling "remote.html"? – yas4891 Jan 12 '14 at 12:27
1

@yas4891 ensure there is a div with the id specified in `data-target`. The contents of `remote.html` should load into this div as in the [bootstrap example](http://getbootstrap.com/javascript/#modals). – Chris Villa Jan 13 '14 at 11:50
2

@Arkan is it really available in 2.3.2? I cannot seem to get it to work using the above syntax. Everything else works perfectly with 2.3.2 modals. However I needed to use the code below posted by Marronsuisse in order to get it to work. – Simo A. Feb 27 '14 at 00:32
The trick (according to docs) is to have .modal-content div inside your target div. Content from remote.html is loaded into .modal-content div. – Slobodan Kovacevic May 06 '14 at 15:55
This option is deprecated since v3.3.0 and will be removed in v4. Alternative answer: http://stackoverflow.com/a/27718716/729324 – marcovtwout Dec 31 '14 at 09:02
if using button instead of anchor, use data-remote="remote-page.html" also if you use this link on table to edit rows, add this tips to your javascript http://stackoverflow.com/questions/12286332/twitter-bootstrap-remote-modal-shows-same-content-everytime – Yohanes Pradono Jun 30 '15 at 00:31

score 20 · Accepted Answer · answered Feb 20 '13 at 09:02

Here is how I solved the issue, might be useful to some:

Ajax modal doesn't seem to be available with boostrap 2.1.1

So I ended up coding it myself:

$('[data-toggle="modal"]').click(function(e) {
  e.preventDefault();
  var url = $(this).attr('href');
  //var modal_id = $(this).attr('data-target');
  $.get(url, function(data) {
      $(data).modal();
  });
});

Example of a link that calls a modal:

<a href="{{ path('ajax_get_messages', { 'superCategoryID': 6, 'sex': sex }) }}" data-toggle="modal">
    <img src="{{ asset('bundles/yopyourownpoet/images/messageCategories/BirthdaysAnniversaries.png') }}" alt="Birthdays" height="120" width="109"/>
</a>

I now send the whole modal markup through ajax.

Credits to drewjoh

This will create a new modal in the DOM everytime. I would rather have the modal container in the page and replace the contents of it using JS. eg. $("#modalContainer").html(data); $("#modalContainer").modal(); — Yashvit, Jul 26 '13 at 06:44
I had to add it to the page and then call the id that comes back into a modal. By doing `$(data).modal()` the modal worked but it was super laggy. — The Muffin Man, Aug 20 '13 at 23:29

Load content with ajax in bootstrap modal

3 Answers3

Linked