Bootstrap модальное «загруженное» событие на удаленном фрагменте

В настоящее время я использую модальный компонент Twitter Bootstrap, и у меня есть проблема, когда я использую плагин проверки jquery для полей ввода в контенте, который я загружаю удаленно, используя атрибут data-remote.

Поскольку содержимое загружается после того, как проверка jquery прошла через dom, проверка новых загруженных элементов не выполняется.

У меня есть решение, в котором я изменяю bootstrap.js (модальный класс), см. ниже.

  var Modal = function (element, options) {
    this.options = options
    this.$element = $(element)
      .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
    //this.options.remote && this.$element.find('.modal-body').load(this.options.remote)

    this.options.remote && this.$element.find('.modal-body').load(this.options.remote, $.proxy(function () {
        this.$element.trigger('loaded')
    }, this)) //my additions
  }

Я запускаю событие «загружено» для вызова, который загружает внешний фрагмент html.

У меня уже есть это событие, и я вызываю проверку вновь загруженных элементов.

$('#myModal').on('loaded', function () {
                $.validator.unobtrusive.parse($(this));
            });

Моя проблема в том, что мне пришлось изменить bootstrap.js, чтобы добиться этого, есть ли способ заставить это работать извне, не изменяя bootstrap.js? Есть ли способ получить доступ к модальному объекту на странице и прикрепить к нему событие «загружено»? я хотел бы сделать это во внешнем скрипте или на странице, поэтому мне не нужно беспокоиться о версиях начальной загрузки.


javascript twitter-bootstrap asp.net-mvc-4 jquery-validate unobtrusive-validation
person scartag    schedule 23.09.2013    source источник
comment
Есть ли проблема с проверкой в ​​событии shown модального окна?   -  person mccannf    schedule 23.09.2013
comment
@mccannf Для удаленного контента показанные триггеры запускаются до загрузки новых элементов.   -  person scartag    schedule 23.09.2013

Ответы (5)


arrow_upward
18
arrow_downward

По обоим этим вопросам:

https://github.com/twbs/bootstrap/issues/5169

https://github.com/twbs/bootstrap/pull/6846

... на данный момент разработчики Bootstrap упираются и отказываются добавлять событие loaded в Bootstrap.

Поэтому вместо этого они рекомендуют вам избегать использования разметки data-remote и самостоятельно загружать данные в модальное окно:

$('#myModal').modal(your_options).find('.modal-body').load('request_url', function () {
  // do cool stuff here all day… no need to change bootstrap
}')
person mccannf    schedule 23.09.2013
comment
Ты замечательный! Спасибо за это решение! Это помогло мне решить эту проблему: stackoverflow.com/questions/20339958/ - person Anton; 16.01.2014
comment
Просто краткое примечание, чтобы люди не просто согласились с принятым ответом, не проверив. В Bootstrap уже некоторое время есть событие loaded.bs.modal — getbootstrap.com/javascript/#modals . - person Jay; 27.02.2015

arrow_upward
36
arrow_downward

Просто обновление здесь:

Bootstrap добавил загруженное событие.

http://getbootstrap.com/javascript/#modals

захватить событие «loaded.bs.modal» в модальном окне

$('#myModal').on('loaded.bs.modal', function (e) {
  // do cool stuff here all day… no need to change bootstrap
})
person George    schedule 07.04.2014
comment
Благодаря вам у меня больше нет волос на голове! - person Augustin Riedinger; 18.10.2014
comment
Пожалуйста, удалите ' из последней строки. Должно быть }) а не }') - person Gogol; 24.12.2014
comment
Это событие работает только тогда, когда содержимое модального окна загружается с удаленной опцией, если содержимое встроено в модальное окно html, оно не работает. - person xzegga; 06.01.2016
comment
Есть идеи, когда это было добавлено? Это не работает для меня - person Glen; 16.03.2017
comment
Это работает, когда нам нужно вызвать функцию после загрузки скрипта в удаленном модальном режиме начальной загрузки. Спасибо. - person Ehsan Chavoshi; 16.05.2017

arrow_upward
18
arrow_downward

Событие «loaded.bs.modal» у меня не работает, поэтому я попробовал событие «show.bs.modal», и оно работает нормально:

$('#myModal').on('shown.bs.modal', function () {
   // do cool stuff here...
});

Это событие фиксируется после показа модального окна.

Я надеюсь, что это поможет кому-то :)

person Mohammed Réda OUASSINI    schedule 24.02.2015
comment
модальные окна сначала показывают, а затем загружают удаленный контент, поэтому он не работает - person Ignacio Vazquez; 06.05.2015
comment
Это не относится к вопросу. Вопрос включает загруженный контент ajax, и «показанный» никогда не запускается как продукт ответа ajax. - person Du3; 01.03.2016
comment
Работал и для меня. Мое модальное тело загружается с помощью ajax, а затем отображается. Может быть, не имеет отношения к вопросу, но полезно для некоторых из нас :-) - person Nik; 21.04.2016

arrow_upward
0
arrow_downward

У меня был довольно интересный улов. В моем случае на локальном хосте событие loaded.bs.modal срабатывало до события shown.bs.modal, так как на локальном хосте действие извлечения данных из URL-адреса «remote» ( который был локальным, кстати), происходил мгновенно, даже до того, как начальная загрузка могла завершить свой переход и вызвать событие shown.bs.modal.

Но на веб-сервере события срабатывали в воспринимаемом порядке.

Сначала срабатывало shown.bs.modal, а затем из-за прагматической задержки удаленного URL-адреса срабатывало событие loaded.bs.modal.

Я хотел захватить событие, которое произошло последним.

Поэтому, чтобы решить эту проблему, я придумал свою собственную реализацию, как показано ниже. YMMV, Здесь много предположений, поэтому примите приведенный ниже код просто как POC и с долей скептицизма, а не как полноценный код.

jQuery('#myModal').on('shown.bs.modal', function () {
    if (jQuery(this).find('.resetFlag').length) {
        // Do something ONLY IF "loaded.bs.modal" hasn't yet been triggered
    }
});
jQuery('#myModal').on('loaded.bs.modal', function (e) {

    if (jQuery(this).find('.resetFlag').length) {
        // Do something ONLY IF "shown.bs.modal" hasn't yet been triggered
        } else  {
        // Do something ONLY IF "shown.bs.modal" hasn already been triggered
        }
});
jQuery('#myModal').on('hidden.bs.modal', function () {
    jQuery('#myModal .modal-content').html('<div class="resetFlag" style="display:none;"></div>');
    showModalLoader();
});
person Mohd Abdul Mujib    schedule 16.11.2018

arrow_upward
0
arrow_downward

Модальные события Boostrap 3.3 содержат событие loaded.bs.modal.

однако в модальных событиях Bootstrap 4 этого события нет. Я бы рекомендовал использовать событие shown.bs.modal, так как оно срабатывает после рендеринга CSS.

person SMAG    schedule 16.12.2020