حل مشکل تداخل Javascript و jQuery در افزونه های جوملا
همانطور که میدانید سیستم مدیریت محتوای جوملا بر پایه نرم افزار PHP برنامه نویسی شده که قابلیت استفاده از زبان های دیگری چون جاوااسکریپت – JavaScript یا jQuery – جی کوئری و… برای بخش های عمگرا را داراست. حال با توجه به گسترش بسیار زیاد افزونه ها و قالبهای جوملایی و اینکه چه کتابخانه هایی از کدهای جی کوئری یا جاوااسکریپت در این الحاقات بکارگرفته شده باشد ؛ به خودی خود میتواند یک مشکل کوچک را برای صاحبان وب سایت ها فراهم کند. این مشکل از آنجا ناشی میشود که ما بروی سایت خود چند افزونه با قابلیت های فنی و برنامه نویسی بالا، اما با نسخه های مختلف جی کوئری و جاوا اسکریپت مختلف و البته ناهماهنگ داشته باشیم و قصد استفاده دو یا چند افزونه ناهماهنگ (از نظر کدهای برنامه نویسی) را داشته باشیم. اینجاست که مشکل ما آغاز می شود که برای این مسئله دو راه حل وجود خواهد داشت یا بصورت دستی اقدام به حذف بخشی از اسکریپت که دچار مشکل شده است نماییم و یا بصورت اوصولی در صدد رفع و حل مشکل بوجود آمده به شکل صحیح خود باشیم.
به دلیل اینکه تداخل ها و دلایل وقوع آنها بسیار متعدد و وابسته به عوامل گوناگون باشد؛ به همین دلیل واقعا نمیتوان یک نسخه واحد و یا یک ترند و متد خاص برای رفع و حل اساسی کلیه تداخل ها و یا اصلاحاً Conflict ها پیچید. چرا که همه ی این موارد در ابتدای امر نیاز به بررسی تخصصی و برنامه نویسی علل وقوع خطا و پس از آن یافتن بهترین راه حل برای حل مسئله است. در این بین افزونه هایی هم وجود دارند که کارشان بطور تخصصی برای رفع این خطاهای احتمالی است اما به تکرار دیده شده که همین پلاگین های رفع کننده هم دردی را درمان نکرده اند.
در اکثر موارد پلاگینهای رفع تداخل کتابخونه ها؛ جوابگو نیستند و عملا کاربردی ندارند و رفع تداخل میبایست بصورت دستی (با آشنایی به php، Jvascript و….) انجام شود. تا بتوانید متد و عملکرد مناسب را با چیزی که با خطا و تداخل بوجود آورده جایگزین کنید.
[quote]
جال چگونه میتوانیم یک تداخل را پیدا کنیم؟
[/quote]
بهترین گزینه برای تشخیص تداخل ها و خطاهای موجود در کدهای برنامه نویسی وب سایت ما استفاده از کنسول های خطایابی مرورگرهایی همچون Google Chrome , Mozilla FireFox هست. و یا افزونه های جانبی مربوط به این مرورگر ها که میتوان به Firebug, Web Developer toolbar, Debugger, Error Console اشاره کرد. میتونید استفاده نمایید. بعد از نصب هر کدام از این افزونه ها در مرورگر شما بخشی بنام Inspect Elements اضافی میشود که با کلیک راست و یا زدن دکمه F12 کیبورد کامپیوتر خود میتوانید به این محیط دسترسی داشته باشید.
صفحه ای مشابه تصویر زیر:
با رفتن به بخش Console و همانطور که در تصویر زیر هم مشخص است فهرست خطاها و مشکلاتی که در وب سایت ما وجود دارد و ناهماهنگی هایی که عناصر فعال در سایت موجب ایجاد آن شده اند کاملا مشهود است.
برای فهمیدن عامل ایجاد مشکل فقط کافی ست به مسیری و عناوینی که در خطاهای بالا بدان اشاره شده است. دقت کنیم. بدین ترتیب به راحتی میتوانیم عامل خطا را بیابیم. اساساً اولین قدم رفع مشکل دانستن عامل ایجاد مشکل است با این روش براحتی میتوانید به خطای بوجود آمده پی ببرید و اگر هم خودتان امکان رفع آن را ندارید میتوانید با مطرح کردن در انجمن های پشتیبانی جوملا در در پی رفع آن باشید.
حالا پس از اینکه عامل ایجاد خطا را پیدا کردیم. میبایست در پی حل این مشکل باشیم. یکی از راه حل ها این است که خودتان دست به کار شوید و اقدام به اصلاح کدهای بروزدهنده خطا کنید.
روش اول:
با توجه به خطایی که در صفحه مشاهده کرده ایم. افزونه ای که در خطا بدان اشاره شده را از طریق مدیریت جوملا غیرفعال کنیم تا در سایت لود نشود.
روش دوم:
صفحه ای که با آن با خطا مواجه شده اید را باز کنید و بعد با کلید های CTRL+U و یا کلیک راست کنید و گزینه View Page Source را بزنید تا سورس کامل آن صفحه به شما در صفحه ای دیگر نمایش داده شود. حالا در این صفحه به کمک کلید های ترکیبی CTRL+F عبارت زیر را جستجو کنید:
|
1 |
jquerynoconflict.js |
و یا عبارت زیر:
|
1 |
jQuery.noConflict(); |
اگر در جستجوی خود این عبارات را پیدا نکردید. پس به این معنی ست که این متد در قالب و سایت شما بکار گرفته نشده است. برای افزودن آن کافی ست به مسیر
joomla_root/templates/TEMPLATE_NAME/index.php
بروید و کد زیر را به فایل index.php قالب و قبل از تگ پایان </head> اضافی کنید.
|
1 2 3 |
<script type="text/javascript"> jQuery.noConflict(); </script> |
روش سوم:
اساسا جی کوئری کتابخانه ای با عنوان noconflict در خود جای داده است که فقط میبایست آنرا در کدهای خود فراخوانی کنید تا تداخل های تا حد زیادی مرتفع شود. برای این منظور در مسیری که خطا به آن اشاره میکند فایل jQuery مربوط به مشخص است بروید و فایل را باز کنید. سپس کدهای زیر را در آن اضافی کنید
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!-- Another way to put jQuery into no-conflict mode. --> <script src="/prototype.js"></script> <script src="/jquery.js"></script> <script> jQuery.noConflict(); jQuery( document ).ready(function( $ ) { // You can use the locally-scoped $ in here as an alias to jQuery. $( "div" ).hide(); }); // The $ variable in the global scope has the prototype.js meaning. window.onload = function(){ var mainDiv = $( "main" ); } </script> |
برای مطالعه کامل و توضیحات بیشتر به مستندات Putting jQuery into no-conflict mode docs مراجعه نمایید.
روش چهارم:
استفاده از افزونه های جوملایی ست که تا حدی میتوانند مشکل گشای این خطا ها باشند برای این منظور و برای استفاده از یکی از کاربردی ترین افزونه ها در این زمینه و دانلود آن میتوانید از پلاگین jQuery Easy استفاده نمایید.
بسیار عالی، آموزش ما برای این مبحث پایان رسید.
خوشحال خواهیم شد که سوالات خود را در ادامه نظرات این پست ارسال فرمایید.
زمانی که افزونه ها پیش نیاز هم هستند چگونه تداخل را برای همیشه از بین ببریم؟
ممنون از مطلب کاربردیتون
موفق باشید
باسلام خدمت شما دوست گرامی.
اساساً با توجه به اینکه هر سایتی ساختار خودش را دارد و از افزونه ها و فریم ورکها و کتابخانه ی خاص خود تشکیل شده است به همین خاطر نمیتوان یک راهکار کلی و عمومی و ۱۰۰% برای تمامی حالات تشریح کرد. اما در روشهای گفته شده ؛ سعی شده تا کاربردی ترین نتایج بدست آمده از تست هایی که منجر به نتیجه شده اند ذکر گردد.
با تشکر از حُسن انتخاب شما
سلام
یه نمونه از تداخل ها مربوط به تداخل کامپوننت های sh404sef با jch optimize میباشد در داخل کامپوننت اولی قسمتی برای مستثنی کردن کامپوننت های دیگر وجود دارد تا اینکه ار تداخل جلوگیری شود اگر امکانش هست براتون یه راهنمایی بفرمایید که این jch optimize رو روی چه گزینه هایی قرار دهیم که بتونه از تنظیمات sh404sef مستثنی بشه تقریبا همه گزینه ها رو تست کردم اما جواب نگرفتم قاعدتا متخصصین میدونن روی چه گزینه ای بهتر جوابها رو میشه گرفت
با سلام خدمت شما
اساساً افزونه SH404SEF در داخل سایت و بخش کاربری کتابخانه و فریم ورک خاصی لود نمیکنه بلکه عملکرد این سیستم در بخشهای مدیریتی و فانکشن های داخلی سیستم هست که در دایرکت لینک ها و استفاده از برچسب ها و هدایت خطاها و ارورهای مختلف موجود در سایت نقش اساسی ایفا میکنه.
پیشنهاد بنده این هستش که اگر منویی خاص دارای خطا هستید میتونید از طریق تنظیمات jch optimaze اون رو نادیده بگیرید . در مورد تنظیماتی که فرمودید با توجه به فریم ورک های بکارگرفته شده در هر سایت و قالب به هیچ عنوان ثابت نیستند و در هر سایت ترکیبی از افزونه ها و فریم ورک ها و کتابخانه های مختلف استفاده شده به همین ترتیب هم میشه نامحدود کانفیگ و تنظیم برای افزونه jch در نظر گرفت که میتونه متنوع باشن.
بهترین راه حل این هست که مورد به مورد پارامترها رو فعال و نتیحه رو تست کنید و گام به گام از گزینه های بهینه سازی استفاده کنید.
موفق و سربلند باشید