jQuery conflicts are among the most common in our forum as well as the tickets. This is due to the fact that Joomla 1.5 and Joomla 2.5 are built on MooTools and therefore every other component, template, plugin or module loads the jQuery library separately. Joomla 3.0 has already solved this, but before we all migrate our websites, we will still meet with jQuery conflicts. Therefore, this tutorial is ready to help you.
Symptom of jQuery conflict can be virtually everything, dysfunctional slideshow, failed module loading content, dysfunctional menu, dysfunctional hidden panel and others.
Confirmation that there is a conflict of libraries can be done in "Console" that is part of the Google Chrome Inspector (same have also Firefox with Firebug extension or Opera with Firefly extension). Console can be opened by clicking anywhere on the page, right-click and select "Inspect Element". At the bottom of the screen will open a new window where you select the last tab "Console".
This image is an example of an error message. Unfortunately, it may also be the case that no error is displayed, and yet it is a jQuery conflict.
As a first step it is necessary to turn off compression of JS (java scripts). This can be done in the Template Setting -> Settings (in the case of template made with ZenGridFramework v1 it is a tab called Performance). To find all instances of the jQuery library loaded we view Page Source Code. You search for the following files:
Beware, there will be many other JS files that have the word in the title of jQuery such as:
But these are only libraries dependent on the jQuery library. Therefore these can be safely ignored.
Once you identify more than one loaded jQuery library, you need to find out which extension it loads and switch off or remove it to prevent further conflicts.
We already have basic instructions to proceed. We know that more than one jQuery library is a problem and also know how to identify the problem.
Now you need to solve the problem. The basis is to find out what extra extension loads the jQuery library. This is possible thanks to the URL used to retrieve it. There are two possibilities:
Ideal case:
/ Media/zengridframework/js/jquery/jquery-1.8.2.min.js
You can see that ZenGridFramework loads jQuery library.
Less convenient:
http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js
In this case you can not tell what extension reads the jQuery library.
Start from the fact that the basic and the only jQuery library will be loaded by template, in our case, by ZenGridFramework. Then in our case, there is still one extra instance of jQuery being loaded directly from the Google pages. Unfortunately, since we can't identify source of loading extra jQuery library, only option is to search all Joomla extensions, find out and disable loading.
If you are not able to identify the extension that is the extra jQuery library loading, there is still one option to block it and prevent loading of it. This is possible by using the settings in the Template Setting -> Setting -> Remove Extra Scripts.
You must activate this setting and in the form add link to the library you want to remove from the load on the site. In our model case it is:
http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.jsThe worst case may be, if you find the same two jQuery libraries loaded on the site. Example like this:
http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.jsIn such case, open the Template setting -> Settings and here in the jQuery Options change the version of jQuery library loaded by JoomlaBamboo template. Now you can identify link to jQuery not loaded by template and you can block and strip this jQuery from loading.
Note: after removing extra conflicting jQuery library try to define loading of the highest version available.
Example:
template loaded jQuery version 1.4, the other extension loads jQuery version 1.8. Therefore, after removal of excess conflicting jQuery library version 1.8 set the template to load a higher version of the jQuery library - version 1.8. This will avoid potential problems with your extension.
Typical representatives of extensions loading extra jQuery are:
k2, ZOO, Widgetkit and various calendars etc.
Disabling of k2 jQuery is documented in detail here: http://docs.joomlabamboo.com/using-joomla/how-to-disable-the-k2-version-of-jquery