jQuery 在引导模式中使用 ajax 加载内容

Load content with ajax in bootstrap modal

提问by fkoessler

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

我正在尝试使用 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

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

What am I doing wrong?

我究竟做错了什么？

采纳答案by fkoessler

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

Ajax 模式似乎不适用于 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.

我现在通过ajax发送整个模态标记。

Credits to drewjoh

贷drewjoh

回答by marcovtwout

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

投票最高的答案在 Bootstrap 3.3 中已弃用，并将在 v4 中删除。试试这个：

JavaScript:

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

Html（基于官方示例。注意，对于 Bootstrap 3.*，我们设置data-remote="false"为禁用已弃用的 Bootstrap 加载功能）：

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

自己试试：https: //jsfiddle.net/ednon5d1/

回答by Chris Villa

Easily done in Bootstrap 3 like so:

在 Bootstrap 3 中轻松完成，如下所示：

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