How to find JavaScript conflict in Joomla?

While JavaScript are beautiful and very handy, they can also bring down a site if in conflict with each other. One can expect JavaScript conflicts to appear as more and more extensions are installed in a Joomla site. The extensions may be using different JavaScript libraries or different library versions or libraries made by different developers which can be in conflict to each other.

It is not all that difficult to rule out such conflicts and extension / template developers can be asked for help then on.

How to find JavaScript conflict in Joomla

What causes JavaScript conflicts?

The different versions of Mootools library and jQuery library can make a lot of JavaScript conflicts. Event when you use the same libraries versions but those libraries made by different developers (i.e jQuery and Mootools conflict), JavaScript conflict can also occur.

JavaScript conflict in Joomla

Here is a case study:

• Template A loads Mootools library version 1.5.0
• Plugin B loads own Mootools library version 1.2.6
• Module C loads jQuery library version 1.11
• Component D loads jQuery library version 2.1.1

An other cause of JavaScript conflict is browser, some non-standard browsers handle JavaScript and the browser's JavaScript conflicts with JavaScript loaded from your site.

How to detect JavaScript conflicts?

So when your site is not working as expected, one should rule out conflicts. But how to check and find the JavaScript conflict? The ANSWER is checking the JavaScript console. There are multiple ways to do it based on browsers. For example, in Firefox and Chrome, the available tools are Firebug, Web Developer toolbar, Debugger, Error Console, etc.

If your site has JavaScript error, the tools will provide you error messages that will help you to figure out the problem and zero in on the extension / feature of website causing this problem. The error message also gets you the names of file in conflicts.

Detect JavaScript conflict in Joomla using firebug on Firfox

You can detect the problem by checking which extensions cause the problem, here are the steps:

• Switching to default Joomla template and disable your installed extensions then reload your site and check if the JavaScript error still exist or not.
• Publish your installed extensions one by one and reload your site. Repeat the process until you discover which parts are in conflict.

Detect JavaScript conflict by publishing extensions one by one

How to resolve JavaScript conflicts?

There is no universal step to resolve JavaScript conflict as it varies from case to case and are best resolved by the developers. But here are few things that you can try:

Put jQuerry into no-conflict mode

The jQuery library and all of its plugins are contained within the jQuery namespace. Global objects are stored inside the jQuery namespace, by the way so you shouldn't get a clash between jQuery and any other library such as prototype.js, MooTools.

Putting jQuery in no-conflict mode immediately after it is loaded onto the page and before you attempt to use jQuery in the page.

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

Ask for help from extension provider

If you can not resolve the JavaScript conflict by yourselves, you can search for solutions on internet, ask on forums like stackoverflow.com or ask for support of the extension provider for solution.

My site has different issues?

JavaScript conflict is just one error type, errors can also be produced by PHP, SQL, etc. You can detect those errors using Joomla error reporting, follow THIS LINK for more details.