Phoca Extensions
Free extensions for Joomla! CMS

Javascript Conflicts

Category: Joomla!

 

If you run Joomla! or similar CMS where you can install more different extensions, it can happen, that some part of your site will not run correctly because of Javascript conflict. What does it mean?


For example in Joomla! (but of course this can happen in every elaborate system), you can install plugins, modules, components and templates. Such parts of system can use different Javascript libraries which can be in conflict to each other. Example:

 

  • Component A loads Mootools library (standard one built in Joomla!)
  • Plugin B loads own Mootools library which is other version than one built in Joomla!
  • Module C loads Jquery library
  • Template D loads Jquery library but other version than the one loaded in Module C.

 

As you can see, there can occur a lot of Javascript conflicts, not only between the same libraries with different versions but between Javascript libraries made by different developers (the most known example is Jquery vs. Mootools conflict). And of course this is not everything what can cause problems. Some browsers (mostly non standard browsers) can cause the conflicts because of non standard handling of the Javascript too. :-(

So if some part of your website does not work as it should work, this can be caused by Javascript conflict. For example: you run gallery with popup window and you click on image and instead of popup window, new page will be loaded, etc.


If the problem is caused by Javascript libraries conflict, you need to look at Javascript console. There are more ways how to do it. For example, in Firefox, you can use Firebug, Web Developer toolbar, Debugger, Error Console, etc. See screenshots:

Displayed Javascript error in Firebug:

Javascript error displayed in Firebug

Displayed Javascript error in Debugger:

Javascript error displayed in Debugger

Displayed Javascript error in Error Console:

Javascript error displayed in Error Console

Some of the methods are a part of browser or they can be downloaded as addon for Firefox, Chrome, etc.

 

In such tools you can find an javascript conflict (error) message which is important for detecting the problem. So if the error will be found, you need to find which part of the website causes this problem. Mostly this is not only one part (e.g. extension) but conflict between two parts (e.g. component vs. module or template conflict).

You should switch to standard template (only for making tests) and disable all added plugins and modules. Run your site and if you will not get any javascript error and your site will be displayed correctly, continue step by step with publishing modules and plugins. Publish them one by one and reload page after every publishing. Such way you can discover which parts (mostly javascript libraries) are in conflict. This can help you to find solution, because you can ask on forum of developer of such part for a solution. Of course will be not so easy in case, two extensions from different developers are in conflict. But this is the first step to solve the problem.

 

Javascript conflicts or errors are not the one error which can occur on website, mostly there are errors produced by PHP or SQL. Such errors can be detected by enabling php error reporting or debug mode in Joomla! - see this article: Most Frequent Errors for more information.

 

 

Phoca Forum - Latest Topics