Bootstrap 4 с дистанционным модулем

Я не могу заставить Modal работать в удаленном режиме с новым выпуском Bootstrap Twitter: Bootstrap 4 alpha. Он отлично работает с Bootstrap 3. С bootstrap 4 я получаю всплывающее окно, но тело модели не загружается. В myRemoteURL.do нет удаленного вызова, чтобы загрузить тело модели.

Код:

    

Нашел проблему: они удалили удаленный вариант в bootstrap 4

remote : эта опция устарела с v3.3.0 и будет удалена в v4. Мы рекомендуем вместо этого использовать шаблоны на стороне клиента или структуру привязки данных или вызывать jQuery.load самостоятельно.

Я использовал JQuery для реализации этой удаленной функции.

 $('body').on('click', '[data-toggle="modal"]', function(){ $($(this).data("target")+' .modal-body').load($(this).data("remote")); }); 

Согласно официальной документации, мы можем выполнить следующее ( https://getbootstrap.com/docs/4.1/components/modal ):

 $('#exampleModal').on('show.bs.modal', function (event) { var button = $(event.relatedTarget) // Button that triggered the modal var recipient = button.data('whatever') // Extract info from data-* attributes // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. var modal = $(this) modal.find('.modal-title').text('New message to ' + recipient) modal.find('.modal-body input').val(recipient) }) 

Поэтому я считаю, что это лучший подход:

 $('#modal_frame').on('show.bs.modal', function (e) { $(this).find('.modal-content').load(e.relatedTarget.href); }); 

Адаптируйте свои потребности

Как показывают некоторые другие ответы и документы Bootstrap , Bootstrap 4 требует обработки события show.bs.modal для загрузки контента в модальный. Это можно использовать для загрузки содержимого из строки HTML или из удаленного URL-адреса. Вот рабочий пример

 $('#theModal').on('show.bs.modal', function (e) { var button = $(e.relatedTarget); var modal = $(this); // load content from HTML string //modal.find('.modal-body').html("Nice modal body baby..."); // or, load content from value of data-remote url modal.find('.modal-body').load(button.data("remote")); }); 

Bootstrap 4 Удаленная URL-демонстрация


Другой вариант – открыть модальный, как только данные будут возвращены из вызова Ajax …

  $.ajax({ url: "http://someapiurl", dataType: 'json', success: function(res) { // get the ajax response data var data = res.body; // update modal content $('.modal-body').text(data.someval); // show modal $('#myModal').modal('show'); }, error:function(request, status, error) { console.log("ajax call went wrong:" + request.responseText); } }); 

Bootstrap 4 Загрузка модала из Ajax Demo

Если вы используете тонкую версию JQuery (как и во всех документах и ​​примерах Bootstrap 4), функция загрузки не будет работать

Вам нужно использовать полную версию JQuery

В Asp.NET MVC это работает для меня

HTML

 Edit item  

JQuery

  

действие

 public PartialViewResult ActionName(int id) { // var model = ... return PartialView("_Modal", model); } 
  • Bootstrap 4 выравнивает элементы навигационной панели вправо
  • Bootstrap - как настроить фиксированную ширину для ?
  • Уменьшение высоты бутстрапа 3.0 navbar
  • navbar color в Twitter Загрузочный
  • Связывание для свертывания события в Twitter Загрузочный файл 3
  • Подсказки jQueryUI конкурируют с Twitter Bootstrap
  • Bootstrap 4 default navbar не работает.
  • Bootstrap 3 Collapse показать состояние с символом Chevron
  • Bootstrap 4 navbar с 2 рядами
  • Строки и столбцы Bootstrap. Нужно ли использовать строку?
  • Как вставить форму django в модальное окно twitter-bootstrap?
  • Interesting Posts

    Понимание оператора модуля%

    Как автоматически перезапустить фоновый процесс linux, если он не работает?

    VLC отключается Звук, когда монитор выключен

    Что значит !! (двойной восклицательный знак) означает?

    Редактирование PDF для удаления раздела?

    Сетевые адаптеры Powerline и расширитель диапазона беспроводной сети

    Размер canvasа HTML5 с помощью атрибутов CSS и элементов

    Есть ли способ запустить страницу JSF без создания всего проекта?

    Как запросить firebase для свойства с определенным значением внутри всех детей

    Могут ли виртуальные машины заражать свой хост?

    ошибка LNK2038: обнаружено несоответствие для ‘_ITERATOR_DEBUG_LEVEL’: значение ‘0’ не соответствует значению ‘2’ в main.obj

    Удаленные запросы Rails 3.1, отправляемые дважды

    Время выполнения кода измерения

    Как правильно обновить угловую 2 (npm) до последней версии?

    Файлы Mex: как вернуть уже выделенный массив Matlab

    Давайте будем гением компьютера.