يتم تخطي e.preventDefault() للتحميل المشروط

Question

لقد وجدت هذا الكود الذي يستخدم ajax لتحميل نموذج، وهو ما أحتاجه لتحميل الوسائط الديناميكية من جداول البيانات الخاصة بي.لدي إعداد علامة لتحميل مشروط هنا مثال

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

ينتقل الرابط إلى الكود المشروط والرمز المشروط فقط في القسم الأخير هو معرف المنتج الذي يضيفه، لذا فهو ينشئ طلبًا فريدًا إلى واجهة برمجة التطبيقات التي ستخدم هذه الصفحة بعد ذلك.لقد كنت ألعب بالكود الموجود على هذا الرابط تحميل مشروط jQuery ajax bootstrap الآن المشكلة التي أواجهها هي أنه بدلاً من e.preventDefault يبدو أن تشغيله يتجاهله وينتقل إلى الرابط، فهل يمكن لأي شخص رؤية الخطأ الذي قد أفعله هنا.تم البحث عن الأخطاء ولا يبدو أن هناك أي أخطاء في عملية التشغيل ولا تدخل في وظيفة النقر مما وجدته ولكنني سأستمر في محاولة الإصلاح أثناء انتظار الردود.

يحرر:

يتم تحميل jQuery بشكل صحيح فوق هذا الرمز وأنا أستخدم jinja2 ويتم تضمين جميع js المهمة في القالب الأساسي الخاص بي ثم يتم تضمينها في طفلي باستخدام {{ super() }} ثم يتم تشغيل جميع البرامج النصية الأخرى ضمن هذا، وهناك جزء آخر من JavaScript يتم تشغيله قبل ذلك والذي يعمل بشكل مثالي وهو مخصص فقط لجدول البيانات وسأقوم بتضمين قسم 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');
                });
            }
        });
    });

يحرر:الرابط المشروط هو مجرد مسار webapp2 وأنا أعلم أن المسار يعمل بشكل صحيح لأنه يقوم بتحميل محتوى المشروط ولكن بدون تصميم حيث من المفترض إضافته إلى الصفحة الرئيسية ولا يحتاج إليه.

يحرر:من قراءة مستندات bootstrap، هذا هو ما توصلت إليه، حيث لم يعد يتم تحميله على الصفحة ولكن النموذج لا يعمل أيضًا وأعتقد أنني قمت بذلك بشكل صحيح ولكن لست متأكدًا.

<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> 

Answer 1

تُعد سمة data-toggle="modal" جزءًا من واجهة برمجة تطبيقات bootstraps.هناك بعض الأشياء الأخرى التي تلعب دورًا هنا والتي تربط مستمعي الحدث بمثل هذه العناصر وما تراه هو في الواقع حدثان يحدثان.الذي تلتقطه في معالج النقر الخاص بك والذي تم تسجيله بواسطة bootstraps API.

بدلاً من استخدام واجهة برمجة تطبيقات سمة البيانات لبدء التقاط الوسائط، انقر كما تفعل بالفعل وقم ببدء تشغيل الوسائط هناك.سيبدو رمز init مشابهًا لهذا:

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

بالإضافة إلى ذلك، إذا كنت تريد تأخير عرض النموذج حتى نقطة لاحقة (بعد الحرف الأول)، يمكنك القيام بشيء مثل هذا:

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

تحقق من وثائق Bootstraps للحصول على مزيد من المعلومات التي وجدتها في مكانها الصحيح.

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