الأرشيف ٢٠٠٨ - ٢٠١٢

حل التعارض بين jQuery مع مكتبات جافاسكريبت الأخرى

أوه .. هذا المقال قديم ... ممممم قديم جداً

jqueryفي بعض الأحيان نلجأ لإستخدام أكثر من مكتبة جافاسكريبت في صفحة واحدة لتشغيل اكثر من تطبيق مختلف .. مثل إستخدام jQuery مع Mootools او jQuery مع prototype … في الغالب يؤدي هذا إلى توقف احد التطبيقات عن العمل بسبب حدوث تعارض بين المكتبات المُستخدمة .. هنا ساعرض بعض الطرق للتغلب على التعارض بين jQuery و المكتبات الأخرى ..

لنفرض أن لدينا هذا الكود و عند إستخدامه يحدث التعارض إما بتوقف عمل هذا الكود او توقف تطبيقات اخرى في الصفحة عن العمل :

سنحاول الأن حل هذا التعارض باستخدام jQuery.noConflict وهناك طريقتان لإستخدامها ..
الطريقة الأولى : سنقوم أولا بإستدعاء الدالة بكتابتها بالشكل التالي jQuery.noConflict(); بعد ذلك في الدوال سنقوم بإستبدال $ بـ jQuery مع وضع $ داخل قوسي function .. هذا سيتيح لنا إستخدام $ داخل الدالة بدون مشاكل … أتوقع أنك لم تفهم شئ :D …. حسناً شاهد الكود التالي و لاحظ التغيير في السطرين الأول و الثاني

الطريقة الثانية : سنقوم بإسناد jQuery.noConflict إلى متغير معين وليكن $j ثم نستخدم $j بدلاً من $ في التطبيق .. شاهد المثال ولاحظ السطر الأول وكيف تم إستبدال $ في باقي الكود بـ $j

هناك طريقة أخرى لا تعتمد على jQuery.noConflict عن طريق إستبدال $ بـ jQuery ولكنها تتطلب إستدعاء مكتبة jQuery قبل المكتبات الأخرى كما أنها لا تعمل بشكل سليم في كثير من الأحيان ….. ( على الأقل من واقع تجربتي ^_^ )

راجع ايضاً .. Using jQuery with Other Libraries

الوسوم

‫۲۹ تعليقات

  1. السلام عليكم ورحمة الله وبركاته..
    تدينة قيمة منك أخي الكريم المعاصر، فمثل هذه المواضيع خصوصا عن المكتبتات الشهيرة ك jQuery ليست متوفرة عربيا إلا بشكل نادر يقترب من العدم..
    لكن لي استفسار أخي: أحيانا أستخدم أكثر من إضافة ب jQuery مع ووردبريس، والمفروض أن نجلب مكتبة jQuery في سطر واحد وتكون أحدث نسخة وتشتغل الإضافات كلها، لكن يحدث أنها لا تشتغل إلا إذا استدعيت لكل واحد منها نسخة المكتبة jQuery الخاصة بها كما وردت في الشرح مثلا، وهو ما لم أستوعبه..
    حبذا لو تخصص تدوينة عن طرق استخدام jQuery مع ووردبريس وأكون شاكرا لك..
    موفق ومني لك أرق تحية..

    1. أهلا بك اخ عبد الهادي ..

      لا أعرف هل هناك تطيبقات تعمل مع اصدارت معينة من jQuery ولا تعمل مع اخرى .. هل لي بـأسماء بعض الاضافات التي تحدثت عنها

      موفق

  2. تنبيه: أضف مؤثرات jQuery في مدونات Wordpress | ألوانك
  3. أهلا بك أخي فؤاد مجددا، وعذرا على التأخير..
    أولا مبارك الشهر الكريم وكل عام وأنت إلى الله أقرب إن شاء الله..
    الإضافات التي استخدمتها أخي هي التالية:

    http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/

    http://net.tutsplus.com/tutorials/javascript-ajax/create-a-tabbed-interface-using-jquery/

    فحينما أتابع الشرح أجد صاحب الإضافة يطلب تحميل آخر نسخة من مكتبة jQuery، ومنطقيا من وجهة نظري يجب أن تعمل كلا الإضافتين حينما نستدعي آخر نسخة من المكتبة لمرة واحدة، والمفروض أن تعمل من خلال استدعائنا لمكتبة jQuery المدمجة مع وورد بريس من غير مشاكل، لكن هذا لم يحصل معي فاضطررت لاستدعاء المكتبة في نسختين مختلفتين، فلربما تكون ملاحظتك تلك صحيحة..
    أنتظر توضيحك يا غالي مع شكري العميق لك..
    مني لك أرق تحية..

  4. جميل جداً كانت تواجهني نفس المشكله وحليتها بطريقه تقريباً نفس هذه الطريقة

    شكراً لك على نشر العلم اخوي فؤاد :) الله يوفقك

  5. لازلت أطمع في الرد لو أمكن، أو على الأقل إخباري في حالة تعذر الرد لضيق الوقت حتى لا أظل رهينا لهذه التدوينة..
    شكرا مجددا ومني لك أرق تحية..

      1. شكرا لك أخي فؤاد على الاهتمام، وأرجو لك التوفيق في أعمالك، وإن كان هناك حل نهائي فسيكون جميلا لو تم نشرته في تدوينة منفصلة للفائدة، وأنا أتحدث تحديدا عن استعمال أكثر من إضافة jQuery في قالب وورد بريس..
        موفق ومني لك أرق تحية..

  6. يزاك الله خير يا المعاصر :)
    واجهتني هذه المشكلة في أحد التصاميم على الوورد بريس .. فلم أعرف ما هو الحل بسبب عدم تعمقي في jQuery .. فكان الحل أني اكتفيت باستخدام تطبيق واحد و ألغيت الثاني :(
    لكن الآن وجدنا الحل و سوف نطبقه في الأعمال القادمة.
    شكراً لك و يعطيك العافية :)

  7. لا اعرف كيف اقوم بشكرك لكن لدي مشكله أنا استخدم بعض خصائص الجاي كيوري وعندما استخدم اضافة Lightbox 2 لا تعمل تلك الخصائص مالعمل؟

    1. اضافة Lightbox 2 تعتمد على مكتبة Prototype … و بالتالي يحدث تعارض بينها وبين jQuery >> هل جربت الحل بالأعلى لحل هذا التعارض ؟

      1. نعم عزيزي جربته أو بالأحرى أني جربته وكانت طريقتي خاطئه لكني قضيت ٣ أسابيع أحل المشكلة ولم أتمكن من ذلك
        أنا آسف جداً أزعجتك بمشكلتي

  8. للأسف لا فائدة .. سأراجع معك ماقمت بعمله فتحت ملف jquery.js وحاولت تطبيق شرحك ولكن تأثيرات الجاي كيوري لا تعمل مع إضافة lightbox هل ماقمت به كان صحيح؟

    يالله لا أعرف كيف أقوم بشكرك لإهتمامك لأمري

    1. أهلا بك عزيزي ..

      الطريقة بالأعلى لا تطبق على ملف jquery.js .. بل تطبق على التطبيق نفسه .. راجع المثال في هذه التدوينة

      لو فرضنا أن تستخدم تطبيق قوائم منزلقة و بسبب إستخدام lightbox فإنها لا تعمل .. إذن عليك تطبيق الطريقة بالأعلى على أكواد القائمة المنزلقة و ليس على اكواد المكتبه نفسها

  9. تنبيه: إصنع قائمة أزرار منزلقة بإستخدام jQuery
  10. السلام عليكم

    اتمنى اعرف حل للمشكله دى فهى عقدتى الوحيده فى اضافه اى تطبيق جافا فى الووردبريس
    بس للأسف لانى مبعرفش اتعامل معا الجافا غير فى حاجات بسيطه فمعرفتش اطبق الدرس

    حاولت اعمل سلايدر لأخر المواضيع فى المدونه واشتغل تمام على القالب الافتراضى twenty
    ومافيش اى تعارض بين الجاكوارى والووردبريس

    لكن لما حبيت اطبق الموضوع على قالب اخر

    حصل مشكله فى ان السلايدر اشتغل بطرييقه غير صحيحه

    $(document).ready(function(){
    $(“#myController”).jFlow({
    slides: “#slides”,
    controller: “.jFlowControl”, // must be class, use . sign
    slideWrapper : “#jFlowSlide”, // must be id, use # sign
    selectedWrapper: “jFlowSelected”, // just pure text, no sign
    auto: true, //auto change slide, default true
    width: “610px”,
    height: “235px”,
    duration: 400,
    prev: “.jFlowPrev”, // must be class, use . sign
    next: “.jFlowNext” // must be class, use . sign
    });
    });

    ممكن اعرف no-conflict mode
    بيتم فى مكتبه الجاكوارى ولا فى سكربت الجاكوارى ولا فى headsection فقط

    1. طبعا الجافا اللى فوق دى الداله اللى عندى فى ال Headsection

      وفى رابطين رابط للمكتبه jquery-1.3.2.min.js

      ورابط للسكربت jquery.flow.1.2.auto.js

  11. لدي كود جكويري وهو عرض للصور s3slider ولكن لدي مشكلة وهي يوجد وميض في الصفحة في كل عرض كانه يحمل الصفحة مرة ثانية الكود اللي استخدمه هو التالي

    $(document).ready(function() {
    $(‘#s3slider’).s3Slider({
    timeOut: 4000
    });
    });

  12. بسم الله الرحمن الرحيم

    – يا غالي انا رح اقول العبارة الي قالها واحد كانت عنده نفس مشكلتي \\
    Ok, after several hours of tearing my hair out, I discovered my own mistake
    هههههه
    – بالفعل انا صارت معي المشكلة من البارح تقريبا وتخيل الساعات الي بحاول احل فيها المشكلة
    الله المستعان جلست كثييير ساعات وانا احاول ، واخيراً طبقت الطريقة الثانية الّي هي :

    var $j = jQuery.noConflict();

    – ونجحت العملية .. والحمدلله ..

    – الف شكر ،، Mnes Blue

  13. من ظن يوما أن تدوينة في 2009 ستساعد شخصا في 2016.
    تبارك الله عليك خويا. شحال وانا كانقلب على الحل. شكرا جزيلا

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

إقرأ أيضاً

زر الذهاب إلى الأعلى
إغلاق