Here I am busting my ass fixing code, again :). A few weeks ago I knew nothing about Dojo now I feel I know more than the person that wrote the code I was debugging. It's hard stuff to look at code see what the programmer is trying to do and fix their code so it does what they intended it to do. As I mentioned in an earlier post, while it is frusterating (to me at least) I do believe debugging some else's code is the best way to learn. It helps that my guy knew what he was doing, so his bugs are not easy and he provides some good code inspiration on what he was trying to attempt.

On to the point. The website we were working on utilizes a dijit (a dijit is pre-built Dojo functionality like a javascript calendar or javascript accordion that you can use on your website by just plugging in a few key parameters to be off and running) accordion widget. It was displaying incorrectly in IE8. Turns out the problem was a combination of several things one of which he was trying to embed html in the title attribute of the accordion pane. Dojo uses the title attribute to make the header of one division of the accordion. This accordion header is where the user clicks to display the text associated with that header.

The mistake was to embed the html in the title attribute. What I came to learn was dijit provides a wonderful themes folder in it is a dijit.css class file which allows you to decorate with CSS all the widgets Dojo makes. After I removed all his markup from the title attribute for the accordion and removed a "display:block" from the special dijit.css file in the themes folder, the accordion works as intended in IE8.

The lesson I learned here is dijit has it's own CSS in which you can customize the look and feel of their widgets to the smallest level, however don't try to change dijit's widget rouge style. It will only cause you time lost and heart ache because the dijit may not work as intended.

Error Readout:
Could not load class 'dijit.form'. Did you spell the name correctly and use a full path, like 'dijit.form.button'?

Fix:
In debugging someone else's code (best way to learn a language, but this is a whole other post) I found a from element and it had dojoType="dijit.form" as an attribute like so:

<form dojoType="dijit.form">
....
</form>

 I removed the dojoType="dijit.form" and bingo error was gone in IE8

Explanation:
There were several issues with this line of markup.

1. If you were going to add the dojo.form to the form tag the proper way to add is:
<form dojoType="dijit.form.Form">
 .....
</form>
However he was diligently practicing OOP, so much so that in his user control (.NET) he forgot he had added the <from dojoType="dijit.form.Form"> to the page he was inserting the user control and therefore having a form nested inside a form, not a good practice.

2. It turns out that IE in general doesn't do to well with dojo and the form tag; suggesting instead to use a div tag and add the form attribute.
Example:
<div dojoType="dijit.form.Form>
....
</div>

Error Readout:
XMLHttpRequest cannot load file: Cross origin requests are only supported for HTTP

Fix:
Host your code on a webserver when working with Dojo and access it through the webserver and not directly on your machine.

Explanation:
I've been ramping up my Dojo skills, by reading the wonderful O'Reilly book above. One thing they forget to explain is most modern browsers won't let javascript traverse your directories when running directly from a folder on your desktop...per say. :) Consequently you need to run that bad boy by accessing it through your very own webserver. It's a big duh when you figure it out as this would be an awesome exploit for some javacript wiener that's up to no good.


(note: I don't like O'Reilly books for learning particular topics, I believe they are only mostly good for reference, and even code references don't vary much from the documentation, but Amazon readers rated this one as one of the best so I picked it up),