Модално „заредено“ събитие на 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“ не работи за мен, затова опитах събитието „shown.bs.modal“ и то работи добре:

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

Това събитие се улавя след показване на модала.

Надявам се това да помогне на някого :)

person Mohammed Réda OUASSINI    schedule 24.02.2015
comment
modals първо показва, след това зарежда отдалеченото съдържание, така че не работи - 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

Имах доста интересна уловка. В моя случай на localhost събитието 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