Debugging javascript issues
From Jomres v4 manual
Contents |
Introduction
This page isn't an exhaustive list of things you can do to debug javascript problems, more a discussion of some of the things you're likely to encounter and ways you can debug them to resolve the issues.
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, Mootools and something by Yahoo 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 I 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 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.
Mootools conflicts
Some templates cause conflicts with Jomres if Joomla calls the mootools javascript files after the Jomres javascript files have been called. To resolve this there is an option in the Jomres Site Configuration -> Misc tab called "Output Jomres javascript headers into the body of the html?". This will then echo the javascript into the body of the page instead of the headers so that the jquery object is created after mootools however this brings it's own problems in that the jquery files may not have been loaded before some left hand search modules are shown and that in itself may generate errors.
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
- jQuery("div.block_ui_bookingform").unblock is not a function
- jQuery.blockUI 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.
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.
