web-dev-qa-db-ja.com

Bootstrapリモートフラグメントのモーダル「ロード」イベント

私は現在Twitter Bootstrapモーダルコンポーネントを使用していますが、data-remote属性を使用してリモートでロードするコンテンツの入力フィールドでjquery検証プラグインを使用する問題があります。

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フラグメントをロードする呼び出しに対して「loaded」イベントをトリガーします。

このイベントは既に接続されており、新しく読み込まれた要素の検証を呼び出します。

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

私の問題は、これを達成するためにbootstrap.jsを変更しなければならなかったことです、bootstrap.jsを変更せずにこれを外部で動作させる方法はありますか？ページ上のモーダルオブジェクトにアクセスし、 'loaded'イベントをアタッチする方法はありますか？外部スクリプトまたはページ内でこれを行いたいので、bootstrapバージョンについて心配する必要はありません。

javascriptasp.net-mvc-4twitter-bootstrapjquery-validateunobtrusive-validation
16
scartag

これらの問題の両方によると：

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
}')
17
mccannf

ここだけの更新：

ブートストラップは、ロードされたイベントを追加しました。

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
})
34
George

「loaded.bs.modal」イベントは私には機能しないので、「shown.bs.modal」イベントを試してみましたが、うまくいきます：

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

このイベントは、モーダルが表示された後にキャプチャされます。

これが誰かを助けることを願っています:)

14
Mohammed Réda OUASSINI

私の場合は、localhostでイベントloaded.bs.modalが発生していましたbeforeイベントshown.bs.modalローカルホストで、「remote」url（）からデータをフェッチする行為がローカルbtw）であったため、 bootstrap=が遷移を終了してshown.bs.modalイベント。

しかし、Webサーバーでは、イベントは知覚された順序で発生していました。

最初に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();
});
0
Mohd Abdul Mujib