Устраняем конфликт между библиотеками jQuery и MooTools

Заметки


Здравствуйте дорогие друзья и любители Joomla. CMS Joomla одна из самых популярных CMS в мире и к ней существует огромное количество расширений в виде компонентов, модулей, плагинов. Разные программисты имеют свою любимую библиотеку, у кого-то это библиотека jQuery, а у кого-то библиотека MooTools. И соответственно на одной и другой пишутся расширения для CMS Joomla, которые можно использовать вместе на одном сайте. Иногда все вместе работает отлично, а бывают случаи что между библиотеками jQuery и MooTools  появляется конфликт , через который расширения могут работать не корректно или вообще не работать. Вот как я устранил конфликт между библиотеками jQuery и MooTools и хочу вам рассказать.

Убрать конфликт jquery и mootools

Устраняем конфликт между библиотеками jQuery и MooTools

Я опишу конкретный случай конфликта между библиотеками jQuery и MooTools на примере 2 модулей написанных на этих библиотеках.

Убрать конфликт между библиотеками jQuery и MooTools в Joomla

И так, конфликт у меня возник между 2 модулями:

  • модуль фотогалереи Simple Image Gallery (описывал я его здесь), написанным на MooTools
  • модуль Сontent glider с помощью которого можно создать постраничный слайдер, написанным на jQuery

Когда я подключил модуль Сontent glider к сайту, модуль фотогалереи Simple Image Gallery перестал открывать фото в lightbox’е. Также другой модуль написанный на MooTools также начал некорректно работать, а точнее перестал раскрываться текст (модульFaqslider) .

Стало понятно, что проблема заключается именно в модуле  Сontent glider и ее библиотеки jQuery. Для таких случаев предусмотрена функция jQuery.noConflict(); для jQuery. И так, как ее подключаем.

Для того что б jQuery.noConflict(); заработала ее нужно вызвать скриптом в такой форме:

<script type="text/javascript">
     jQuery.noConflict();
 </script>

и вызвать скрипт после того как вызывается библиотека  jQuery. Для этого я зашел в папку модуля Сontent glider  modules/mod_featured_content_glider/tmpl. Именно в этой папке находится файл в котором формируется вывод самого модуля и после вызова библиотеки jQuery я вставил jQuery.noConflict();,смотрим:

<script type="text/javascript" src="modules/mod_featured_content_glider/content_glider/jquery-1.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>

После того как вставка сделана, нужно в самом скрипте который использует библиотеку jQuery сделать замену, а именно знаки доллара $ заменяем на jQuery. Если скрипт довольно большой, то можно произвести массовую замену с помощью Notepad++ (мой способ). В моем случае скрипт назывался featuredcontentglider.js и я произвел около 60 замен символа $ на jQuery.

После таких корректировок в модуле Сontent glider конфликт библиотек jQuery и MooTools исчез и все модули начали работать нормально.

Этот способ не панацея от всех несовместимостей библиотек, но он помог мне и другим людям, по этому стоит попробовать и вам если возникла такая проблема.

На решении этой проблемы я заканчиваю пост Устраняем конфликт между библиотеками jQuery и MooTools закончен. Желаю вам что б ваши расширения всегда работали адекватно. Если возникли вопросы по этому поводу, задаем их в комментариях. Увидимся.

Joomla Блог Nauca – научись работать с Joomla

 

Хочешь получать на e-mail свежие статьи о шаблонах, компонентах, модулях, плагинах и других полезных вещах Joomla? Не пропусти ничего полезного, подпишись на новости блога Nauca: 


  • Большое спасибо! Очень помогли!

    • Рад что смог помочь.

  • Александр

    Спасибо огромное, а то я уже и не знал, что делать.

    • Всегда рад помочь.

  • Ihone

    Здравствуйте, Art Image Cycle конфликтует со всем подряд, в часности с JoomGallery.
    Подлючаются все скрипты через php.
    if ($loadJQuery) {
    $document->addScript(JURI::root() . ‘modules/mod_artimagecycle/js/jquery.js’);
    }
    $document->addScript(JURI::root() . ‘modules/mod_artimagecycle/js/script.js’);

    Как в этом случае правильно прописать jQuery.noConflict();? В самом скрипте?

    • jQuery.noConflict(); ставить после вызова скрипта + в самом скрипте (в твоем случае script.js) знаки доллара $ заменяем на слово jQuery

  • Andrey_g89

    Спасибо за решение проблемы. Проблема этого конфликта, актуальна не только для Joomla. У меня в TYPO3 такая проблема выскочила. Благодоря вам все работает отлично

    • Рад что смог помочь.

  • Андрей

    Спасибо, спасибо, спасибо!!!!! + 100500 тебе !!!! очень выручил пост!!

    • Всегда пожалуйста )))

  • Html-css

    блин. сам непонял что сделал.
    короче поставил первую часть перед вызовом скрипта,
    потом вторую часть после вызова.
    попробовал заменить знаки доллара, но скрипт перестал работать.
    но даже без замены знаков доллара, скрипт перестал конфликтовать.
    Спасибо. хоть ниче непонял абсолютно с ваших пояснений. как то описывайте
    понятнее что куда. как то получилось методом тыка.

    • Описано все пошагово и просто. Нужно только точно выполнять шаги.

  • Kron

    Спасибо за метод, но возникла такая проблема, как только ставлю после кода
    <script type="text/javascript" src="baseurl ?>/templates/template;?>/js/jquery-1.4.2.js»>
    ваш код
    jQuery.noConflict();
    Скрипт перестаёт работать, но конфликт пропадает, замена знака доллар ничего не меняет. Конфликтует ява скрипт выпадающего меню с lightbox на Virtuemart.

    • Сам скрипт, noConflict(); не может влиять на скрипт. Замену знака доллара нужно проводить в скрипте самого лайтбокса, а не в библиотеке jquery. Если вы все так и делали, то тогда лучше предоставить мне урл и я на самом сайте гляну.

      • Kron
        • Укажите пожалуйста саму проблему что не работает, так как лайтбокс работает нормально.

          • Kron

            Работает т.к. в коде страницы выставлен jQuery.noConflict(); , но из-за него перестаёт работать выпадающее меню слева, если убрать строчку jQuery.noConflict(); перестаёт работать лайтбокс и просыпается меню. Если интересно могу скинуть код шаблона страницы. 

          •  Если скрипт на jquery только для выпадающего меню, тогда я бы посоветовал не заморачиватся, а использовать дополнительный модуль выпадающего меню с множеством доп.настроек, плюс без конфликтов. Модули можете найти у меня на блоге, есть пару штук.

          • Kron

            Спасибо огромное за помощь, море интересного у тебя в блоге нашёл 

          • Не за что, заходи будет еще много интересного :-).

  • Axeland

    Замечательно, помогли очень! 

  • Madison21

    А я что-то не допонял в каких именно файлах править. Разъясните пожалуйста..
    У меня просто прописывается в файле index.php

    И там как раз 2 библиотеки стоят. из-за которых возникает конфликт

    • Прочитайте внимательно что было описано в посту. Править нужно и в index.php и в скрипте расширения.

  • Ermakbrothers

    Большое спасибо, для людей работа которых не подразумевает хорошее знание jQuery и MooTools подобная информация бесценна

  • Иван

    Сработало! Работает! Работает! Работает! АААААА! 

    Уже много других статей смотрел, не помогло, а как тут написано — сразу все заработало! Спасибо!!!!!

    • Рад что помог.

  • Павел

    На странице есть два скрипта внутрениие (не подключаются внешне) — один карта google, другой — показывает текущую время и дату. если ставить jQuery.noConflict(); туда и туда — то дата отображается, карта — нет, если удалить с даты — карта не отображается, дата — отображается, если удалить с карты: тоже самое карты нет, дата — есть. если вообще не вставлять jQuery.noConflict(); — то отображается только карта)) вот такой бред)
    Помогите пожалуйста — как сделать чтобы и текущая дата и карта подружились на одной странице!

    • попробуйте в скрипте часов заменить jQuery на time и подключить отдельно $time=jQuery.noConflict();

  • Олег Дечев

    Добрый день!
    Подскажите как решить конфликт между
    и
    спасибо огромное

    • Поскольку я знаю, библиотеки не конфликтуют, конфликтую скрипты которые используют эти библиотеки.

  • Den

    Спасибо. Долго еще боролся, но все получилось!
    Решил конфликт Ignite Gallery 2.6 с меню superfish и заодно еше с этими:
    — jquery.prettyPhoto
    — jquery.equalheights

  • Kira

    Здравствуйте. Вчера задавала вам вопрос по другой вашей статье. Насчет yooeffects. Как оказалось, в нем используется MooTool. Сейчас сделал все по вашей статьи и все получилось! Огромное вам человеческое спасибо!

  • Оказывается, можно сделать проще.
    Когда у меня на сайте перестали работать некоторые эффекты mootools (yoo-модули и всякая подобная красота), я заподозрил, что это связано с установкой какого-то нового компонента.
    Так и оказалось!
    Нашёл в списке плагинов «System — Mootools upgrade», которого раньше там не было, закоментировал и вуаля! Сразу всё заработало!!!
    Может, конечно, это не все конфликты лечит. И не исключено, что что-то другое в этот момент отключилось… Но я негативных последствий пока не заметил )
    Зато попутно решению своей проблемы обновил все yoo-компоненты на сайте, накатил новый JCE и вообще всё перешерстил. Так что всякие конфликты полезны, ибо мотивируют заняться наконец сайтом!

  • Виктор

    Прочитал вашу статью, но у меня все равно не выходит. Прошу помогите, а то я уже не знаю что делать.
    Вкратце опишу ситуацию.
    У меня вот на этой странице  стоит меню использующее jQuery и фотогалерея. Фотогалерея по-умолчанию работала с jQuery 1.6.1, но она работает и на jquery 1.3.2, единственное при этом не работает меню. 

  • Bjik2011

    Добрый день, у меня конфликт возникает между chronoforms и Mootools в IE8.
    Я сhronoforms из Index.php  не вызываю. что тогда делать не знаю, помогите пожалуйста

    • В чем именно проявляется конфликт?

  • Bjik2011

    Когда открываеш в I8 пункт форму заказа-сделаную в chronoforms 3, то пишет что объект не подерживает это свойство или метод media/system/js/mootools.js строка 53 и строка 59

    • Если это только в IE8 то это не конфликт, а глюк IE8

      • Bjik2011

        а как его устранить вы не подскажите, пожалуйста

        • напишите урл сайта, посмотрю чем смогу помочь.

  • Может у кого-то и прокатило, но я уже 2й день мучаюсь, комбинирую скрипты и толку нет. Все написанное перепробовал. Проблема с Lightbox + accordion меню.

  • пьюпиль

    не подскажете ли: подключил библиотеку лупы cloud-zoom.1.0.2.min, при использовании с jquery-1.7.1.min ВСЁ РАБОТАЕТ но FF firebug выдаёт дважды ошибку при нажимании на элемент для увеличения: uncaught
    exception: [Exception… «Component returned failure code: 0x804b0002
    (NS_BINDING_ABORTED) [nsIStreamListener.onDataAvailable]» nsresult:
    «0x804b0002 (NS_BINDING_ABORTED)» location: «JS frame ::
    chrome://dmbar/content/lib/tracingListener.js :: ::
    line 75″ data: no](function(a,b){function cy(a){return f…lace(B,»mouseenter$1 mouseleave$1»)};
                      jquery.js (строка 2) — это не конфликт библиотек? а то чтото ваши инструкции не в моём случае… хотя я талантливый ученик и у меня «прекрасный» урок по библиотеке от Попова (if работает then нетрогай.) 🙂 ИЛИ ?

  • спс!!!!!!!!!!!!!!

  • А что делать если нужно повторно подкючить jguery, но при повторном подключении работает только 1 из плагинв?

  • Сработало! чувак! Блин, СПАСИБО!!!

  • Код который указан на сайте yootheme нужно вставить в расширени от них, в то место где подключается библиотека jQuery

  • Zond 007

    Опишите подробней где конкретно вставлять скрипт, где убирать $! Не надо отправлять перечитывать пост!

    • Если с моего текста вам ничего не было понятно, тогда больше ни чем я не могу вам помочь.

      • Zond 007

         Смотрите, у меня возникла проблема между Light Box(работает на MooTools) и Glossy Accordion Menu(работает на JQuery). Glossy Accordion Menu это модуль вмести с плагином(по отдельности не работают). Я нашел ddAccordionMenu.lib.php и ddaccordion.js. И в них я должен внести те изменения о которых шла речь в посту! Буду очень благодарен за помощь, я сам еще имею очень мало опыта, но а проблема должна быть решена срочно!

        • И так, после того как вызывается файл ddaccordion ставим код ноконфликт(скорее всего это файл ddAccordian.lib.php), а в самом файле ddaccordion заменяем значки $ на jQuery.

          • Zond 007

            «а в самом файле ddaccordion заменяем значки $ на jQuery»

            Речь идет о файле ddaccordion.js. То есть в самом файле сценария. Правильно? 

          • Да

  • RomaRio

    Блин , все ссылаются на этот сайт! А не работает этот метод, по крайней мере в моем случае.
    jQuery.noConflict(); ничего не меняется, а замена $ на jquery окончательно добивает и модуль перестает работать.

    • Все дело в том, что данный метод не является универсальным, но в многих случаях помогает. Я в комментариях приводил ссылку на другую статью, которая возможно вам поможет, прочитайте ее.

  • Br_

    Дружище, БОЛЬШУЩЕЕ тебе спасибо. 
    3-е суток мучился, пока тебя не нашел. 
    Успехов 🙂
    Еще раз спасибо.

  • Savel-y

    Спасибо большое! Давно читаю блог — нашел кучу полезной информации. Ваш опыт делает работу намного проще.

  • Katjuha6

    Ребят! помогите, пожалуйста! установила компонент formcalc. но видимо там где-то конфликт чего-то с чем-то. на сайте достаточно много всего наставлено… на совершенно чистой joomlе все работает без проблем. может конфликт jQuery и MooTools, может Java. понятия не имею. в программировании пень полный, а перенастраивать все заново, чтобы методом исключения найти — долго и нудно. =(

  • Михаил

    У меня конфликтует YOOeffects и Core Design Scriptegrator вообще не понимаю чего нужно  редактировать 

  • Отличная статья, помогла устранить конфликт, разжевана до мелочей. Спасибо:)

  • Mikure

    а как убрать конфликт со стороны MooTools не трогая jQuery??
    Спасибо за ответ

  • Григорий Князев

    Спасибо, товарищ! Очень помог =)

  • Anastasya Kotzegub

    круто!!! спасибо!!! никогда не думала, что смогу своими силами решить!

  • проблема такая. движок DLE, у него уже стандартно подключены библиотеки jquery. Есть скрипт который открывает боковую панель и выдвижное меню минипрофиля. Это все в одном, но там же я так понял и скрипт который кофликтует с аякс навигацией шаблона, то есть не открывается всплывающие окна, минипрофиль в аякс, и редактирование новостей. как можете помочь? вышеописанно не помогает. если заменяю $ на $j например и прописываю через var $j = jQuery.noConflict();, не помогает(