e.PreventDefault（）はモーダルロード用にスキップされています

StackOverflow https://stackoverflow.com//questions/24045225

質問

Ajaxを使用してモーダルをロードするこのコードを見つけましたそれは私のデータテーブルから動的モジュールをロードする必要があるものだけです。モーダルヘルスをロードするタグ設定があります例

<a class="blue" href="/api/getmodal/products/' + str(self.result.ids) + '" data-toggle="modal"> 
    <i class="icon-zoom-in bigger-130"></i> 
</a>
.

リンクはモーダルコードに行き、モーダルコードだけが最後のセクションを追加する製品IDで、このページを提供するAPIに一意の要求を作成します。私はこのリンクでコードで遊んでいます jQuery Ajax Bootstrap Modal Loading 今すぐ課題走行するe.preventDefaultの代わりにそれを無視してリンクにジャンプすることは誰でもここで間違っているかもしれないものを見ることができます。エラーを探していて、ジョグにエラーが発生していないようで、私が見つけたものからクリック関数に入りませんが、応答を待っている間に修正しようとし続けます。

編集：

jQueryはこのコードを正しくロードされていますjinja2を使っていて、私の基本テンプレートにすべての重要なJSが含まれているので、{{ super() }}を使用して私の子に含まれているので、その下で他のすべてのスクリプトが実行されます。これは、DataTableのためだけに完全に機能する私のJSセクション全体を含めます。 Console.logセクションは、コードに到達するかどうかを確認するためのデバッグ用です。

jQuery(function($) {
        var oTable1 = $('#sample-table-2').dataTable( {
        "sAjaxSource": '/api/products/datatables',
        "aoColumns": [
          null, null,null, null, null,
          { "bSortable": false }
        ] } );


        $('table th input:checkbox').on('click' , function(){
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
            .each(function(){
                this.checked = that.checked;
                $(this).closest('tr').toggleClass('selected');
            });     
        });
    })

    $(document).ready(function() {
        // Support for AJAX loaded modal window.
        $('[data-toggle="modal"]').click(function(e) {
            sleep(10000)
            e.preventDefault();
            console.log('point two');
            var url = $(this).attr('href');
            if (url.indexOf('#') == 0) {
                $(url).modal('open');
                console.log('point two');
                sleep(1000);
            } else {
                $.get(url, function(data) {
                    $('<div class="modal hide fade">' + data + '</div>').modal();
                    console.log('point three');
                });
            }
        });
    });
.

編集： モーダルへのリンクは、モーダルの内容をロードすると、そのルートが正しく機能するが、メインページに追加されていないとは限らず、そのルートが正しく機能していることを知っています。

編集： ブートストラップドキュメントを読むことから、これは私がページに読み込まれなかったものですが、モーダルはうまくいかないだろうと思うのではなく、わかりません。

<a class="blue" data-toggle="modal" href="/api/getmodal/products/' + str(self.result.ids) + '" data-target="#modalProduct" > 
    <i class="icon-zoom-in bigger-130"></i> 
</a>
.

役に立ちましたか？

解決

data-toggle="modal"属性はブートストラップAPIの一部です。ここでは、イベントリスナーをそのような要素に添付し、あなたが見ているものに、実際に2つのイベントが起こっていることがあります。クリックハンドラとブートストラップAPIによって登録されているものにキャプチャしているもの。

データ属性APIを使用して、モーダルキャプチャをモーダルキャプチャしてください。initコードはこれに似ています：

$('#myModal').modal({
remote:url
});
.

さらに、後の点までのモーダルの表示を遅らせたい場合（initの後）このようなことができるようにすることができます。

$('#myModal').modal({
remote:url,
show:false
});
.

ブートストラップのマニュアル詳細については、それがかわいい場所であることを発見しました。

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top