Topic: Diagnosing JavaScript problems

[aboututila]

I have written this posting in an attempt to help SOBI2 users diagnose JavaScript problems.

SOBI2 users are at risk of JavaScript problems on any Joomla! 'page' where the SOBI2 Component (or associated SOBI2 Plugins and SOBI2 Modules) create output that uses JavaScript, these include;
SOBI2 Menu Module, SOBI2 Search, WYSIWYG Editors, Google Maps, SOBI2 Tabs, Sigsiu Tree (Category Tree display) and other SOBI2 plugin's such as the Gallery Plugin, Reviews & Ratings Plugin, etc.
Basically, almost anything that provides an interactive/dynamic display of the current 'page', (you 'click on it' or 'mouse over it' to interact with, or change, what/how the current 'page' is displayed)

This problem is not unique to SOBI2, it is a general Joomla! JavaScript issue, whereby Joomla! JavaScripts and 3rd Party Component, Module, Plugin and Template JavaScripts may conflict with each other. Unfortunately, unless you are a JavaScript Expert, there is no simple way to find JavaScript problems, let alone solutions.
Sometimes, even if you are a JavaScript Expert, it is difficult to find problems in scripts written by others.
Your JavaScript problem may be a 'domready' problem, a JavaScript conflict, a JavaScript coding/syntax error, or a HTML parsing problem.

(1) Finding the problem
This is around 80% of 'the battle'. Because modern browsers are 'fault tolerant' and able to deal with 'tag soup problems', such problems are not always obvious. If modern browsers were not 'fault tolerant' probably around 99% of Internet Web Sites would be unusable. Even popular and major web sites often have validation errors.

Arguably the best method to find problems is to use the FireFox Web Browser to track down problems by viewing the content of the Firefox Error Console
Firefox Menu->Tools->Error Console
and by installing the following FireFox add-ons/extensions;

(a) HTML Validator
     Easiest to use, but only helps with HTML errors.
     It is a good thing to get rid of all HTML validation errors first, since it is possible for these to effect JavaScripts.

(b) Web Developer
     Arguably next easiest to use.
     Helps track down HTML, CSS, and JavaScript Errors
     Helps find JavaScript errors, but not debug the actual scripts.
     Often, by just finding and identifying the JavaScript Error(s), the fix may be obvious
     and further 'debugging' (with 'watch expressions' and 'breakpoints') of the offending script is not necessary.

(c) Firebug
     Most comprehensive and hence complex
     JavaScript debugging capabilities
     Similar to Web Developer Tools included with Internet Explorer 8 and later
     (or the Internet Explorer Developer Toolbar for IE 6 and 7).

In Internet Explorer, set;
Tools->Internet Options->Advanced->Disable Script Debugging (Internet Explorer)=No (unChecked)
Tools->Internet Options->Advanced->Disable Script Debugging (Other)=No (unChecked)
otherwise Internet Explorer is unlikely to obviously report any errors,
(other than 'flashing' the message "Done, but with errors on page" in the bottom left corner of the Browser status bar).
For Internet Explorer 8 users, use the Developer Tools included in IE 8.
For Internet Explorer 7 and below, you can download the Microsoft Internet Explorer Developer Toolbar
For other Browsers you will need to find appropriate 'Developer' options/extensions.

Hopefully, by using the these tools you will be able to gain an idea of where JavaScript errors are occurring.

(2) Is it a problem with the SOBI2 Component output?
This step can be useful for determining if the problem is caused by the SOBI2 Component content,
or problems caused by the SOBI2 Component content combined with the Joomla! Site Template content.

You can determine if it is a problem with the SOBI2 Component only by using URL's that only output the content of the SOBI2 Component and not the entire content of the Site Template.
These URL's use the Joomla! index2.php method and are of the form;
URL = http://{WebSiteName}/index2.php?option=com_sobi2&sobi2options

For example;
The SOBI2 Frontpage, URL = http://{MyWebSite}/index2.php?option=com_sobi2
A SOBI2 Details View, URL = http://{MyWebSite}/index2.php?option=com_sobi2&sobi2Task=sobi2Details&sobi2Id=x (where x = ID of a SOBI2 Entry)
A SOBI2 Category View, URL = http://{MyWebSite}/index2.php?option=com_sobi2&catid=y (where y = CatID of a SOBI2 Category)
A SOBI2 Special Task, URL = http://{MyWebSite}/index2.php?option=com_sobi2&sobi2Task=z (where z = the name of a SOBI2 Special Task)
etc, etc

If the problem does not occur when you access a valid SOBI2 URL beginning with;
http://{MyWebSite}/index2.php?option=com_sobi2
but does occur when you access a valid SOBI2 URL beginning with;
http://{MyWebSite}/index.php?option=com_sobi2
then the problem can be assumed to be either
(a) related to other content on the Joomla! 'page', or,
(b) between the output of the SOBI2 Component and the other content on the Joomla! 'page'.

(3) Finding the cause of the problem
After completing Step (2) above, you probably have some details of which JavaScript is causing an error to be reported by the diagnostic tools. Now you will need to understand what is causing that script to be output on your problem 'page'.

(a) Look at the Page/Document HTML Source code
Look at the Page/Document Source for your Joomla! generated problem 'page'.
Probably the easiest way to do this is to use your Browser, almost every Browser has a built-in menu option to do this.
For example;
FireFox->View->Page Source (or Ctrl +U)
Internet Explorer v8->View->Source
Safari->View->View Source
Opera->View->Source
Google Chrome->'Right Click'->View page source

(b) and then look in the page source code for HTML script tags, for example;
<script>some JavaScript code</script>
<script type="text/javascript">some JavaScript code</script>
<script type="text/javascript" src="path to file containing some JavaScript code"></script>

(c) You will need to determine which of these <script>...</script> is causing the error to be reported by the diagnostic tools, and then what is causing that <script>...</script> to be output on the problem 'page'. It could be one of many things, the Site Template, the Joomla Core code, or a Joomla Extensions (Component, Module, or Plugin).

(4) Finding a Solution
Sorry, there are no simple solutions.
But at least you now have an idea of what the error is and what may be causing it.
I can only suggest 'Google' searching for a potential solution.
Many errors have known solutions/work-arounds, the 'trick' is to use the most appropriate Google search terms. Try different variations.

(5) A note about JavaScript Conflicts and Incompatibilities
JavaScripts Conflicts are not necessarily errors in individual JavaScripts, but rather incompatibilities between scripts (ie: script Objects with the same name), or Layout engine - ECMAScript Engine support of JavaScript, or JavaScript Frameworks, which result in errors/problems in a particular Browser implementation, or when they are used together.

(a) JavaScript Library Conflicts
Check for known JavaScript Library conflicts by Google searching using the library name and 'conflict' as search 'keywords'.
The 'standard' Joomla! 1.5.x core code uses the mootools JavaScript library.
Some Joomla! extensions use other popular JavaScript Libraries such as the JQuery JavaScript library.
And, for example, it is possible for JQuery scripts to conflict with mootools scripts, but luckily there is simple fix for this.
Refer Google search 'jquery mootools conflict'

(b) JavaScript library versions
JavaScript library versions may cause problems.
For example;
Joomla! 1.5.11 can load mootools v1.11
Joomla! 1.5.19 can load mootools v1.12 or v1.2.4
Joomla! 1.5.23 can load mootools v1.12 or v1.2.5
but different Joomla! extensions (and versions of those Joomla! extensions) may require different versions of mootools libraries.
For example;
The SOBI2 Extended Search AJAX (JavaScript) functions used by SOBI2 2.9.3.2 and earlier are not compatible with all versions of mootools 1.2.x
(Refer Fix for Sobi2 Search and Mootools Upgrade)

And not all versions of mootools libraries are backwards compatible with previous versions.
(Refer
Upgrading to MooTools 1.2 - Tips, Tricks, and Backwards Compatibility
Supporting MooTools 1.12 and 1.2)

(c) JavaScript Library and script loading sequence
JavaScript Libraries have to be loaded before the scripts that use them are loaded.
Some JavaScript Libraries must be loaded before others, (for example, mootools must be loaded before JQuery, which must be loaded before jQuery.noConflict(); - and before any other JavaScript code that makes use of either.)

(6) JavaScript problems in Internet Explorer
However, even if you manage to get everything perfect in FireFox, it is still possible to have JavaScript problems in Internet Explorer. These problems may be due to the fact that different Browsers have differing levels of support for JavaScript. But usually, with well written scripts and JavaScript libraries, these problems are often due to syntax parsing of the script code and Internet Explorer's JScript engine treating JavaScript code as JScript code. Typically they come down to simple, but very difficult to find, problems such as a comma or some other syntax punctuation in the 'wrong' place.
Refer;
The Case of IE and the Delinquent JavaScript Comma
Lightweight Headless Test for Trailing Commas in JavaScript
Google Search "IE JavaScript Comma" and you will discover that this is a fairly common (although difficult to find) problem.

(7) Bottom Line

(a) Resolve problems with FireFox first.
     Use FireFox with the recommended extensions above to remove all errors, invalid HTML, CSS, etc.
     Although most modern browsers are fairly tolerant of errors, get rid of as many as you can, to eliminate these as the potential cause of your problem.
     CSS errors are not necessarily a major problem.
     Most CSS validation errors are usually related to Browser specific CSS extension statements that are not W3C compliant and which for IE can be resolved by the use of IE Conditional statements.
If it works OK in FireFox there is a very good chance it will work OK in all other Browsers (except Internet Explorer).

(b) Then test again in Internet Explorer
     Once you can no longer detect any errors in FireFox, then test again in Internet Explorer (using Internet Explorer Developer Tools/Toolbar). Although Internet Explorer supports JavaScript, it apparently treats <script type="text/javascript">some JavaScript code</script> as JScript. I have (as have others) struggled to discover exactly what the differences are between JavaScript and Microsoft's JScript.

I hope this helps - Mark