bencoffman.com/blog - Dojo

Finding the asp.net id with Dojo.byId, jquery("#id"), and Microsoft AJAX $get

Ben Coffman — Mon, 25 Oct 2010 04:22:51 GMT

Problem:
When I look for the id of an ASP.NET element with some sort of neat DOM querying language I can't find it.

Solution:
Remember ASP.NETer's ASP.NET renames the id from what you named it to something different when it writes the element out to the page. The good news is ASP.NET always names it to the same unique name (something like but not necessarily ctl00_classname_controlname). Knowing this, you can run your page once and grab the id from the page source. Now use your super cool DOM querying language of choice to find that id by it's new proper ASP.NET name.

Explanation:
Why does ASP.NET do this? The good super geeks at Microsoft know that most of us, not you the reader of course, are not wise enough to give each ASP.NET element a unique name so they won't conflict with each other when ASP.NET is doing all its little magic tricks.

Once again this is a stupid little error that hung me up for more than I'd like to admit. I knew ASP.NET did this I just didn't piece together on why I couldn't find the element by id with my querying language.

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>

XMLHttpRequest cannot load file: Cross origin requests are only supported for HTTP -- When working with dojo

Ben Coffman — Tue, 14 Sep 2010 03:17:39 GMT

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),