How to fix Javascript Conflicts

If the jQuery UI Calendar is not working on your website then it's because your page has a Javascript Conflict. You should clean all the erros from your browser console and see exactly what is wrong. When using the jQuery UI calendar (datepicker) the most common Javascript error that we get is:

datepicker is undefined

A Javascript file is responsible of this conflict. Since this file could be called by either the template, a module or a plugin, a manual debug of the source code is always required in order to understand the reason of this problem.

Usually, when the jQuery UI datepicker calendar or any other widget of jQuery UI don't work, another jQuery library is the cause of this conflict.

If you are using some modules of e4j that came along with the extension, the first thing that you should do is disabling the setting "Load jQuery" from the Module Manager in the Administrator section.

If the problem persists we need to debug the source code of the page that is not showing the calendar.
The calendar is generated by jQuery UI, a javascript library that implements the standard functions of the javascript framework jQuery. In order to make the Calendar work, in the souce html code of the page, after the library jQuery UI another jQuery library cannot be called in the code flow otherwise jQuery will be reset and your browser will "forget" the functions needed to render the Calendar.

Usually these problems are caused by Modules or Plugins because they are rendered after the component so, if they use jQuery, the file will be called after the jQuery UI library making the calendar not work.

This is an example of a correct source code that renders the jQuery UI Calendar correctly:
correct source code example for the calendar
working jquery ui calendar example
As you can see, after the library jquery-ui-1.10.1.custom.min.js has been called, no more jQuery libraries are called so the browser is able to render the datepicker calendar correctly.

Here is an example of an incorrect source code that will generate a Javascript error in your browser console:
incorrect source code example for the calendar
not working jquery ui calendar example
In the example above another jQuery library is called after the file jquery-ui-1.10.1.custom.min.js and this way the browser will forget how to render the calendar because jQuery and jQuery UI have been reset.


Some templates are made in a way that doesn't let the component use any extended and/or custom jQuery library such as jQuery UI because they render in the code flow all the scripts of the component and the modules and then they call their own jQuery library that resets everything.

In case of desperate situations where it's impossible to fix the loading of extra unuseful jQuery libraries we can edit the source code of the responsible jQuery.js file (or files in case the problem is caused by more than just one library) by adding a simple if statement that will fix all the problems. In the example above this would be impossible because the responsible jQuery file is hosted on an another domain and not on our server but usually the modules and plugins use their own .js files.

Let's assume then that the file jquery-latest.min.js was hosted on our server. We need to open it with a good text editor that won't mess up the source code and edit its content like this:


if(typeof jQuery == 'undefined') {

	//place your jQuery core code here
	/*! jQuery v1.9.1 jquery.com | jquery.org/license */
	//.................................................
	//.................................................

}
		

This way we tell the browsers to read the jQuery core code only if it wasn't defined before, keeping the jQuery UI instance alive and working.






Extensionsforjoomla.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.
e4j - Extensionsforjoomla.com - VAT N. 02196010975