Загрузить контент с помощью 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>

Мой модальный:

<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

Что я делаю неправильно?


jquery twitter-bootstrap modal-dialog
person fkoessler    schedule 20.02.2013    source источник

Ответы (3)


arrow_upward
41
arrow_downward

Ответ, получивший наибольшее количество голосов, устарел в Bootstrap 3.3 и будет удален в версии 4 . Попробуйте это вместо этого:

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 (на основе официального примера. Обратите внимание, что для 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>

Попробуйте сами: https://jsfiddle.net/ednon5d1/

person marcovtwout    schedule 31.12.2014
comment
У меня есть страница, на которой перечислены сотни записей заказов, и все они должны загружать контент в модальное окно с использованием запроса AJAX. Этот метод загружает мою первую запись, по которой щелкнули, но после этого он просто продолжает показывать модальный режим с предыдущими загруженными данными вместо того, чтобы делать новый запрос AJAX для обновления с новой нажатой записью. Какие-нибудь идеи? - person JasonDavis; 15.06.2015
comment
Модальное окно все еще открыто, когда вы нажимаете на одну из других ссылок? Этот обработчик javascript запускает запрос при отображении модального окна. В вашем случае вам, возможно, придется переписать его и использовать, например, обработчик кликов. - person marcovtwout; 16.06.2015
comment
Это вызывает 2x вызовы ajax в Bootstrap v3. Один для исходной модальной загрузки AJAX и один для вашего события show.bs.modal (которое запускается после исходного вызова ajax). - person Laurence; 06.08.2015
comment
Спасибо, что заметили это. Официальные документы здесь не очень ясны - теперь я специально отключил исходную загрузку через data-remote=false и добавил JSfiddle. В Bootstrap 4 это больше не нужно. - person marcovtwout; 06.08.2015
comment
Я обнаружил, что мне пришлось добавить $(document).on("click", '[data-toggle="modal"]', function (e) { e.preventDefault(); });, чтобы браузер не отправлял запрос на получение по адресу href, а также вызов ajax. - person Colin; 15.04.2016
comment
@Colin, в каком браузере и какой версии загрузчика это было? Я не могу воспроизвести вашу проблему на скрипке (jsfiddle.net/ednon5d1) - person marcovtwout; 18.04.2016
comment
@marcovtwout потрясающе!!! теперь работает с моим контентом ajax. Огромное спасибо!!! - person user2513846; 18.07.2016

arrow_upward
27
arrow_downward

Легко сделать в Bootstrap 3 так:

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
person Chris Villa    schedule 08.09.2013
comment
Также доступно в версии 2.3.2 с тем же синтаксисом. - person Arkan; 05.01.2014
comment
Не могли бы вы привести пример ожидаемого ответа при вызове remote.html? - person yas4891; 12.01.2014
comment
@ yas4891 убедитесь, что есть div с идентификатором, указанным в data-target. Содержимое remote.html должно загружаться в этот div, как в примере начальной загрузки. - person Chris Villa; 13.01.2014
comment
@Arkan, это действительно доступно в 2.3.2? Кажется, я не могу заставить его работать, используя приведенный выше синтаксис. Все остальное отлично работает с модальными окнами 2.3.2. Однако мне нужно было использовать приведенный ниже код, опубликованный Marronsuisse, чтобы заставить его работать. - person Simo A.; 27.02.2014
comment
Хитрость (согласно документам) заключается в том, чтобы иметь div .modal-content внутри вашего целевого div. Контент из remote.html загружается в div .modal-content. - person Slobodan Kovacevic; 06.05.2014
comment
Эта опция устарела, начиная с версии 3.3.0, и будет удалена в версии 4. Альтернативный ответ: stackoverflow.com/a/27718716/729324 - person marcovtwout; 31.12.2014
comment
если вы используете кнопку вместо привязки, используйте data-remote=remote-page.html. Также, если вы используете эту ссылку в таблице для редактирования строк, добавьте эти советы в свой javascript stackoverflow.com/questions/12286332/ - person Doni Wibowo; 30.06.2015

arrow_upward
20
arrow_downward

Вот как я решил проблему, может быть кому-то будет полезно:

Модальность Ajax, похоже, недоступна с 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

person fkoessler    schedule 20.02.2013
comment
Это будет каждый раз создавать новое модальное окно в DOM. Я бы предпочел иметь модальный контейнер на странице и заменить его содержимое с помощью JS. например. $(#modalContainer).html(данные); $(#modalContainer).modal(); - person Yashvit; 26.07.2013
comment
Мне пришлось добавить его на страницу, а затем вызвать идентификатор, который возвращается в модальное окно. Выполняя $(data).modal(), модальное окно работало, но было очень медленным. - person The Muffin Man; 21.08.2013