在引导模态中使用ajax加载内容 [英] Load content with ajax in bootstrap modal

问题描述

我正在尝试使用ajax引导程序模式检索数据:

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>

我的模态:

<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>

当我单击链接时，显示了模态，但主体为空.此外，我看不到任何ajax请求. 我正在使用Bootstrap 2.1.1

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

我在做什么错了?

推荐答案

这是我解决此问题的方式，可能对某些人有用:

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

boostrap 2.1.1似乎不提供Ajax模态

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();
  });
});

调用模态的链接示例:

<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>

我现在通过ajax发送整个模式标记.

I now send the whole modal markup through ajax.

drewjoh

这篇关于在引导模态中使用ajax加载内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！