CSS'ing Up Those Dijit Widgets dijit.accordion dijit.calendar

Ben Coffman — Tue, 28 Sep 2010 04:33:09 GMT

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.

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

Ben Coffman — Mon, 27 Sep 2010 03:34:18 GMT

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>

bencoffman.com/blog - IE8

CSS'ing Up Those Dijit Widgets dijit.accordion dijit.calendar

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