Home ›

At the Forge - Dojo Events and Ajax

Issue 156

From Issue #156
April 2007

Apr 01, 2007  By Reuven M. Lerner
 in
The quality of your Dojo depends upon your connections.

Last month, we began looking at Dojo, one of the most popular open-source JavaScript toolkits to emerge in the last year or two. Although using a toolkit is not required if you want to include Ajax or sophisticated client-side functionality in your Web application, it certainly makes things a great deal easier. In particular, such toolkits typically know how to handle the many subtle differences in JavaScript implementations on different browsers. JavaScript is far more standardized than used to be the case, but a number of traps still exist when trying to work with multiple platforms, and using a toolkit can relieve you of having to handle them yourself.

In last month's article, we looked at Dojo's packaging system, some of its enhancements to the JavaScript language and its rich-text editor. This month, we look at some of Dojo's other capabilities that might interest modern Web developers, including support for events and Ajax.

Event Handlers

One of the cornerstones of JavaScript programming is the use of event handlers—functions that are invoked when a particular event occurs. For example, we can define a function that opens an alert box:


<script type="text/javascript">
    function openAlert() {
    alert("Hello!  This is an alert!");
}
</script>

We can then tell the user's browser to invoke our openAlert function whenever someone clicks on a paragraph of text:


<p onclick="openAlert();">This is a paragraph.</p>

There are several interesting things to notice in this short example. First, we have set the onclick event handler in this case. About a half-dozen other event handlers exist from which we could choose. In many cases, we might set more than one event handler. This was particularly prevalent in the pre-CSS days, when JavaScript event handlers would be used to change the look of an icon when the mouse was hovering over it.

Second, event handlers sometimes can be used in contexts you might not expect. For example, the above <p> tag has an onclick handler. You normally wouldn't think of clicking on a paragraph of text, but we can do that. This is the basis for some of the modern drag-and-drop events.

Third, although JavaScript does make it pretty easy to attach handlers to particular events, some messiness still is involved. We cannot define multiple event handlers easily or disconnect handlers that have been defined.

Dojo Events

By this point, you might be wondering what JavaScript event handlers have to do with using Dojo for Ajax and modern Web applications. The answer is that much of Dojo's functionality, across all of its many packages, depends on the event system. If you want to use Dojo's Ajax package, for example, you need to connect it using Dojo events. This might seem restrictive at first glance; however, Dojo events are surprisingly easy to understand.

As a simple example, let's see how we might implement our onclick handler from before using Dojo events. First, we need to modify our event-handling function so that it takes one argument, the event itself:


<script type="text/javascript">
    function openAlert(evt) {
    alert("Hello!  This is an alert from Dojo!");
}
</script>

Next, we must connect the paragraph to the event. Rather than doing this directly, by setting the onconnect handler, we give our paragraph an id tag:


<p id="para">This is a paragraph.</p>

Now, we can use Dojo's dojo.byId function—similar in some ways to Prototype's $() function—to get the node itself:

var para = dojo.byId("para");

Finally, we connect our paragraph to the handler function we created:

dojo.event.connect(para, "onclick", openAlert);

If we put it all together, we get the program shown in Listing 1, which I have called test-dojo.html.

Listing 1. test-dojo.html


<html>
  <head>
    <title>Testing JavaScript with Dojo</title>

    <script type="text/javascript"
    src="/javascript/dojo.js"></script>
    <script type="text/javascript">
        dojo.require("dojo.event.*");

        function openAlert(evt) {
        alert("Hello!  This is an alert from Dojo!");
        }
    </script>

  </head>

  <body>
    <p id="para">This is a paragraph.</p>
      <script type="text/javascript">
      var para = dojo.byId("para");
      dojo.event.connect(para, "onclick", openAlert);
      </script>
   </body>
</html>

One thing you might notice is the three <script> tags in the file. The first, in the head of the document, downloads dojo.js, the main Dojo source file, from the server. The second, also in the head of the document, imports the Dojo package for events and defines our event-handling function, openAlert. The third and final piece of JavaScript, which attaches the node to the event, is in the body of the document, right after our p tag is defined. This is because we can set an event handler only for an object that already exists, which means after the p tag itself.

If you load the page into a browser window, you will see that it works just like the previous version. Given that this version is more complex, it might not seem obvious how it is better.

______________________

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Im fearful of resorting to

Mike's picture
Submitted by Mike (not verified) on Wed, 06/20/2007 - 17:23.

Im fearful of resorting to ajax at times when I am coding because the search engines cant read it.

Webcast
More Resources
How to Build an Optimal Hadoop Cluster to Store and Maintain Unlimited Amounts of Data Using Microservers

Realizing the promise of Apache® Hadoop® requires the effective deployment of compute, memory, storage and networking to achieve optimal results. With its flexibility and multitude of options, it is easy to over or under provision the server infrastructure, resulting in poor performance and high TCO. Join us for an in depth, technical discussion with industry experts from leading Hadoop and server companies who will provide insights into the key considerations for designing and deploying an optimal Hadoop cluster.

Learn More

Sponsored by AMD

White Paper
More Resources
Red Hat White Paper: Using an Open Source Framework to Catch the Bad Guy

Built-in forensics, incident response, and security with Red Hat Enterprise Linux 6

Every security policy provides guidance and requirements for ensuring adequate protection of information and data, as well as high-level technical and administrative security requirements for a system in a given environment. Traditionally, providing security for a system focuses on the confidentiality of the information on it. However, protecting the data integrity and system and data availability is just as important. For example, when processing United States intelligence information, there are three attributes that require protection: confidentiality, integrity, and availability.

Learn more about catching the bad guy in this free white paper.

Learn More

Sponsored by DLT Solutions