Javascript Conflicts

As of January 2012 this article is largely obsolete, due to changes made to Jomres back in v5.2 where a new "noConflict" mode was adopted which has been hugely successful in eliminating javascript conflicts with other plugin's inclusion of jQuery library files.

 

September 2015 update : This article is still obsolete. With the adoption of Bootstrap into the Joomla system conflicts through multiple versions of jQuery being installed are largely a thing of the past, but they do still occasionally appear.

 

You may be been guided to this page by the Jomres staff because you're experiencing JavaScript problems on your site where some other scripts are preventing the Jomres JavaScript functionality from working.

Every day we get numerous questions and tickets asking why certain elements of Jomres JavaScript functionality (particularly the booking form) doesn't work. We know that Jomres doesn't work in a vacuum and right from the very start we coded Jomres JavaScript so that it would work in a "noConflict" mode, meaning that it shouldn't interfere with other JavaScript libraries on the same page.

That said, there are often still problems where some other code on the site doesn't play nicely with the Jomres JavaScript. There isn't much we can do about this as it's utterly impossible to test Jomres against all possible Joomla plugins. The only thing we can do is test Jomres on a default installation of Joomla in a selection of browsers.

If you've installed another template or module/component/plugin that introduces JavaScript errors into a page, there's not a lot we can do about it. You can prove that the plugin you've installed is responsible by changing your default template and disabling any plugins/modules etc that you may have installed that could also cause the problem. Additionally, it's not unheard of for some cheap hosts to inject advertising direct into your page, this can also insert html into the data returned from an ajax call an break the booking engine.


If you suspect a conflict is causing problems then first you'll need to install some tools to help you analyse these issues. Our preferred tools are Firefox combined with Firebug. Once you install the Firebug extension you'll be able to view your site (make sure you've enabled firebug in it's configuration settings) in Firefox and if there are Javascript errors you'll see them in Firebug's console.

Firefox download

Firebug

Once you've identified the problem, you're then advised to contact the suppliers of that software and ask them why it doesn't work with jQuery running in noConfict mode.

History of the internet and everything

Once upon a time complex javascript was used by just the javascript gurus, but then came along libraries like jQuery and Mootools which made using complex scripts a piece of cake and soon everybody was using them to throw together menus and templates and web applications that work just like desktop applications.

Pretty soon folks realised that lots of these libraries were incompatible with each other because they use the same function names, or the same object names or for some other obscure reasons that to this day we still don't understand. Joomla, being the great big melting pot of creativity that it is, is a classic example of this because of the huge number of technologies people use to achieve solutions and the willingness of those folks to share those solutions.

How this affects Jomres

Historically Jomres, which was written using the jQuery library for AJAX back when Joomla 1.0.x was new, used to have problems with the mootools library in Joomla but this has, to an extent, been licked by calling first the jquery library then jomres.js and defining var jomresJquery = jQuery.noConflict(); on the first line of jomres.js.

However, there are (unfortunately, regularly) other issues again with mootools or other implementations of jQuery in third party templates. This isn't a flaw in Jomres (unless you consider using any kind of javascript library a flaw) but simply a direct result of the hodgepodge of javascript implementations that Joomla has become.

When I develop Jomres, I can't test it against every third party template out there, it's just not feasable. Apart from the fact that many of them are not free, often because of the way they're written the 'sophisticated' ones are just not compatible with Jomres due to how javascript has been implemented on them. The only thing I can do is test Jomres against a standard installation of Joomla and ensure that it works. If you choose to install the shiniest, sparkliest new template from template-club-of-the-moment then it might not be too surprising (if the template uses javascript, which most do) that there are conflicts.

How do I know that I've got a problem like this?

The usual cause is some javascript on a Jomres page not working as expected. The most noticable place for this is in the booking form, you click on a calendar or the guest number dropdown and nothing happens.

How do I debug this then?

There's no easy answer to that question as each problem is different, however you can help yourself to figure out roughly where the problem is by installing  Firefox and  Firebug. Enable firebug for your server and try to do things in the booking form. If it comes up with a red icon in the bottom right of your browser with "NN Errors" then you've got a problem with javascript. Click on the red box to bring up firebug (you might need to configure script monitoring) if the bar isn't already open and look at the errors it's giving you.


Some other common problems

I'm not going to go through all of the errors that I've seen over the years (my memory's not that good) but I will enter here some that have cropped up recently.

Jquery being defined by a template, errors in the booking form can look like:

jQuery.jheartbeat is undefined

This has become a bit more common recently as several template designers seem to be using jQuery quite a lot nowadays.

As stated before, when Jomres starts it first calls the main jQuery library then it does ''jQuery.noConflict();'' in the jomres.js script. The purpose of the noConfict mode of jQuery is to help jQuery work alongside other javascript libraries however if the template also calls a jQuery core library later on in the execution of it's index.php then the second call to the jQuery library wipes out the call that Jomres already did. If that library's the same version as the Jomres one, and if the template designer uses ''jQuery.noConflict();'' then you will not see a problem. Where you will see a problem is if they aren't using noConflict mode (their jQuery calls will look liked ''$(foo.bar).'', or if they're using a different implemenation like so: ''$jQuery.noConflict();'' or ''jQ.noConflict();'' etc. In this case, what's happened is the Jomres functions call ''jQuery'' and the browser no longer has it defined, and it throws it's arms up in disgust and stops running the javascript.

To resolve this there is an option in the Jomres Site Configuration -> Misc tab called "Load Jomres jQuery library?" Try setting it to No.

If using this option doesn't work there are two ways you can fix it (three if you choose to use another template).

Edit out the calls in Jomres and rename all the calls from ''jQuery'' to (for example) ''$jQuery''. Don't, please, just don't try this. jQuery is used so extensively within Jomres you'll be bald or grey or quite insane long before you've finished doing this.
Edit the template to
Remove the calls to it's own jQuery library, trusting it to use Jomres library (if a Jomres module however isn't called on every page of your site then you might, depending on the template, need to instead of removing the call, put in an ''if'' statement so if you're not on a Jomres page then it includes it's own call to the jQuery library
Then edit all files that the template uses to generate it's own javascript, replacing calls to ''$jQuery'' with ''jQuery''. If you know what you're doing, then this is by far and away the better solution.

Unfortunately, doing anything like this requires a reasonable understanding of Jomres, Joomla, PHP and javascript in general. If you find yourself shaking in fear at the mention of the word "variable" you might struggle with this. If you're keen to learn about web development and web applications then by all means crack on. Ditto, if you've got a good designer who 'gets' the problem. If you're new to the business then in all honesty I'd advise you to find another template.