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?

Answer 1

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/