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

问题描述

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

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

我的模态:

<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h3>生日和纪念日</h3>
<div class="modal-body">

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

当我点击链接时，会显示模态但正文是空的.此外，我没有看到任何 ajax 请求被提出.我正在使用 Bootstrap 2.1.1

我做错了什么?

解决方案

以下是我解决问题的方法，可能对某些人有用:

Ajax modal 似乎不适用于 boostrap 2.1.1

所以我最终自己编码:

$('[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发送整个模态标记.

感谢 drewjoh

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?

解决方案

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

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