Brent Kearney

Introduction

Over the past few months, I’ve been reading up a lot on “AJAX“, Asynchronous JavaScript And XML, which initially I just thought was the latest buzzword for the egregious use of JavaScript. Well, it is and it isn’t. I ordered the O’Reilly JavaScript book, read a good deal of it, and started adding cool client-side JS tricks to my web apps. Unfortunately the book doesn’t touch on XMLHttpRequest() at all, which is really the crux of AJAX.

There is a lot of information on XMLHttpRequest() and AJAX out there on the ‘net, so I wasn’t that concerned about its lack of coverage in O’Reilly’s so-called Definitive Guide. I needed a book about the JavaScript fundamentals, and that was my main reason for buying it.

My first real-world use of AJAX-like techniques was in an application where I used a lot of tags, with onclick="doThis(bar)" JavaScript event thingies. (Yes, thingies is a technical term). The event handlers that I set up used the innerHTML property to dynamically change the content of the page in the browser. It worked, its really neat, and its heading in the right direction — but its not really what AJAX is all about.

The XML in AJAX is really very important to the system. Its use, together with the DOM, allows you to leave the onclick thingies out of your HTML and the innerHTML properties out of your JavaScript. You assign custom event handlers to the nodes of your DOM, and send XML-formatted replies back from your server-side script in order to affect real-time changes to the document loaded in your browser. It sounds complicated, and it is a bit, but the good news is that there are a lot of very clever people who have created tools to simplify the process.

One of those tools, or toolkits, is called Dojo. While Dojo is an ingenious toolkit, the documentation is sparse and highly technical, and it seems to assume a lot of prior knowledge. So while I try to hunt down the information that I need to get started with using Dojo, I’ll chart my progress here on my blog, in the hopes that others will find it useful.

Down to Business

At the top of my HTML, I include what I hope is the necessary Dojo files, plus my own js file, “mycode.js”:

...

I don’t have good reasons for choosing the dojo.require() bits that I did – I’m just hoping that it adds the very basic functions that need for now, and I’ll learn as I go about what modules contain which parts and functions that will be useful for me.

I’m going to start with something extremely basic: executing a function when a user clicks on a checkbox. Here’s the part of my HTML to which I’ll be assigning a JavaScript function:

Look Mom! No “onclick()”!

Now for my JavaScript code in the included “mycode.js” file. I really struggled with an error that I kept getting:


Error: bad srcObj for srcFunc: onclick


Dojo even spit this error out, prefixed with the word FATAL. I couldn’t see why, and going back to my old “onclick(myfunction())” in the tag fixed the problem. The solution was given to me by some kind folks in #dojo on IRC.

The problem was that the global javascript code was being loaded by the browser before the HTML, and it referenced objects that the browser didn’t yet know about. One solution — for now — is to use another javascript function, onLoad(), to load my code after the page is done loading. So here is the working code with Dojo’s built-in onLoad function:

dojo.addOnLoad( function() {

   /* When user clicks the "register"
    * checkbox, do something, anything!
    */
   dojo.event.connect( dojo.byId("register_checkbox"),
        "onclick",
        function() {
           var O = dojo.byId("register_checkbox");
           alert("Have an object:" + O + "!");
   });

});

Not a very useful set of anonymous functions! It is however my first baby steps towards working with Dojo to assign JavaScript functions to HTML elements. When I click on the checkbox identified by the id=”register_checkbox”, I get a pop-up message that says:


Have an object:[object HTMLInputElement]!


The thing to note here is the 3 arguments passed to dojo.event.connect() – one an HTML element, the second the javascript event, and the last is an anonymous function which could actually be the name of a separate function. If you do use a separate, named function, be sure to put it in double quotes, and do not use (). So for example, another way of writing it would be:

function Bar() {
    var O = dojo.byId("register_checkbox");
    alert("Have an object:" + O + "!");
}

dojo.event.connect( dojo.byId("register_checkbox"),
    "onclick', "Bar" );

Part 2, coming soon.

Add comment