Load content with ajax in bootstrap modal
jquery, modal-dialog, twitter-bootstrap
Solution
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
Problem
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">×</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?