Dojo 1.5 is out and its Feature Packed

Dojo 1.5 is out and its feature packed, details from Ajaxian.



From the Ajaxian, story Dojo certainly looks to be a lot prettier. If you don't know, Dojo is a full featured open source JavaScript framework. It provides all the controls and widgets you would find in something like Visual Basic. And from the sounds of it, they are getting a lot of help from IBM. Definitely worth a look if you are comparing JavaScript frameworks for your next project.

Using the Google Ajax Libraries API

The Google Ajax Libraries API is a caching service for popular JavaScript libraries. Essentially, instead of loading your favorite library from your own web server, you get to use a Google URL to load the library. Since Google has all sorts of caching and edge services, this should load your library and your page much faster. In addition, if other sites use the same service, chances are your lib could already be cached in the browser. So how do you use the service?

Easy Mode

The easiest way to use the server is to just update your script tag to use a Google URL. For example, to use the latest version of JQuery I would simply use this script tag.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

That is pretty much a slam dunk. Available URLs for JQuery, Dojo, etc... are listed in the documentation.

Fast Mode?

According to Google, the fastest and most flexible way to load the library is with the google.load() method. So the above script tag is replaced with a call to the Google jsapi library. Here is a sample of head section from my JQuery-Examples page.

 4:<head>
 5:  <title>JQuery Examples</title>
 6:  <meta name="keywords" content="jquery, form, val, html, validation"></meta>
 7:  <script type="text/javascript" language="javascript" src="pages.js"></script>
 8:  <?php include($_SERVER['DOCUMENT_ROOT'] . "/in/cssblip.php"); ?>
 9:  <script src="http://www.google.com/jsapi"></script>
10:  <script>
11:  // Load jQuery
12:  google.load("jquery", "1.3.2", {uncompressed:true});
13:
14:  function pageLoad(){
15:    // do stuff when DOM is ready
16:
17:    $('table#mainTable tbody tr:odd').addClass('oddTable');
18:    $('table#mainTable tbody tr:even').addClass('evenTable');
19:
20:  }
21:  
22:  google.setOnLoadCallback(pageLoad);
23:  </script>
24:  
25:</head>
26:<body>

Basically, you load the jsapi libary which in turn loads JQuery. Apparently, the compressed version of the library is loaded by default, given that, I added the third parameter to the load method. Firebug tells me that the jsapi lib is 5k and JQuery is about 35k so I think I'm getting the minified version. Also, the documentation suggests I use google.setOnLoadCallback to detect page load instead of the similar JQuery function.

Summary

So to sum up. If you want simple, go with the first option. If you want fastest, go with option 2. Either way, your Ajax enabled pages are gonna load a lot faster. Thanks Google!

Wierd Style Errors with Dojo

This problem has bitten me in the rear end one too many times, so I thought I had better write something. Whenever you run into a weird formatting problem with a page using Dojo. Whevever all the class definitions look right, all the includes look right, everything looks right, and the formatting still is not right. Check the <body> tag.

<body class="tundra">

Nine of ten times, you have not set the class equal to "tundra". I keep doing this and it drives me nuts. lol. Always check the obvious first.

Dojo DND

Just a quick note on after finishing up the code. If you use DOM to do all the manipulation with dojo DnD elements, that seems to be golden. Everything works just fine. You can add elements, delete them, whatever and the code still works.

Stick an innerHTML in there anyplace and things will break.

T is Undefined - Dojo DND (Drag N Drop)

Here is another note, that will hopefully help some other poor developer
that runs into the same problem. I'm implementing Dojo drag and drop for
a project. I'm refactoring the code so that a table is created from an
Ajax call as opposed to a static data. When the table data is static and
my table container has a static dojoType of dojo.dnd.source, everything works
fine. However, as soon as you add dynamic data to the table, drop stops working.
A javascript error "T is undefined" is generated and that is that.

The problem is cause by the fact that the dojo dnd code does not check the
container for updates. Consequently, when it finds new data in there, breakage
occurs.

The solution is to create your table first. Then, add the dnd features to the
table programattically. For example:

dndTable = new dojo.dnd.Source(dojo.byId("idOfTargetContainer"));

Voila! Dnd functionality is added and nothing breaks. I still have a few
table manipulation features. So if I run across any other tips, I'll be sure to
share.

Chewing on Cookies

On vacation this week, but have been doing a little work here and there. Currently I'm figuring out how to work with cookies using Dojo and PHP. So here are a few quick examples if you are ever interested.

Set a Cookie in PHP

<?php
setcookie('CookieName', 'cookie value', time() + 3600 * 24);
?>

Just call the setcookie() function. Set the cookie name and and a value as shown. Notice how the time is set. Get the current time, then add the number of seconds you want the cookie to last. In this example, the cookie would be set to last 24 hours.

Get a Cookie with PHP

<?php
$cookieVar = $_COOKIE["CookieName"];
?>

To get a cookie, just access the global $_COOKIE variable.

Delete a Cookie with PHP

<?php
setcookie ("CookieName", "", time() - 3600);
?>

To delete a a cookie, set the cookie with an empty value and a time value in the pass. This should cause the browser to delete the cookie.

Get a Cookie with Dojo

// Initialize on Load
dojo.addOnLoad(function(){

  var cookieVar = dojo.cookie("CookieName");

});

Call the dojo.cookie() function with the cookie name to get the value of the cookie.

Delete a Cookie with Dojo

function logOff(){
  dojo.cookie("CookieName", "", {expires: -1});
}

To delete a cookie the approach is similar to PHP, set the cookie to an empty value and time, a day in the past.

App Server Log Reports [object HTMLInputElement] Instead of Text

Ran into this last week, chalk up another bone headed mistake for Mike. :) Once again, I'm hoping this note will help someone else if they run across this problem.

Problem: I'm using dojo.xhrPost to submit a form to an application server. However, when the data shows up on the application server, instead of text, I am getting [object HTMLInputElement]. Perplexing. If I submit the form without Dojo I seem to get text. What's the deal?

Solution: I was updating someone else's code to use a form for submission. The long and the short of it was, the old code uses "content:" to submit the data. The content attribute is used for creating an object literal list of values to submit data. For example:

myVar = {
  param1:"some value",
  param2:"another value"
}

Fine and dandy when you are using something other than a form.

...
content:myVar,
...

So I had changed the code to this, not noticing the slight change in syntax.

...
content:myForm,
...

However, since a form does not submit its data in this way, mayhem ensues. lol. To fix the problem, replace the above with:

form:myForm,

This results in happiness and joy for all.

Dojo Tab Example Using Code

I have started on a Dojo project for work. While reading up on Dijit, I ran across an example of how to use Dijit controls using JavaScript. This intrigued me as I have never liked putting JavaScript code in the HTML like most of the Dojo examples.

Using the book as an example, I tried the same thing and of course it didn't work. lol. After a little Googling around a solution was found. First, in a tab container, the tabs themselves must be added as children to the tab container. Ok that makes sense. But once I removed the Dojo attribute for the tab container it no longer displayed on the page. Well, it turns out, to get the thing to display, you have to call the controls startup method to make this happen.

As a result of the experience I have written up an example with comments.

Dojo Cookie Example

I have added a Dojo cookie example to my Dojo Examples Page. Setting and retrieving the cookie is pretty straight forward.

The next example will also be with cookies. This time I stick some JSON text in the cookie and retrieve it.

Dojo Examples Page

I started a Dojo Examples page here. Currently there is just an example of the forms ValidationTextBox control. Which I gotta say, is a pretty neat tool. I couldn't find anything nearly as easy to use or with as much functionality in the JQuery world.

There will definitely be more to come.

Dojo Examples and Learning Info at dojocampus.og

The Dojo folks have a site setup for examples and a little learning. For example, you can see examples of all the dijit widgets at: http://dojocampus.org/explorer/#Dijit. The main site is of course at: http://dojocampus.org.

I haven't looked at the tutorials yet to see how good those are. The dijit examples are very helpful. Will post more if I get a chance to take a better look at this.

Dojo DOM Lookups: dojo.byId vs diji.byId

Just wanted to provide this link to a page that describes the difference between dojo.byId and dijit.byId. The page describes the difference in a very concise manner.

Dojo Tutorials via Ajaxian

Thanks to the folks at Ajaxian who provided the links to these tutorials on Dojo.

• Dojo Drag and Drop, Part 1: dojo.dnd


• A Beginner�s Guide to Dojo Charting, Part 1 of 2

I'm really interested in the first one. I like the drag and drop lists you find on a number of sites now and want to incorporate that into my site.

Sending Test Params with Dojo

I wanted to send some test data to a server script from Dojo but I didn't want to create a form. After a little snooping around I found out the content property the xhr object will do this. However, I didn't find a lot of examples of how I was supposed to format the field.

The documentation seems to indicate param=value, but that obviously wouldn't work. Below is an example of what works. Basic object literal format seems to do the trick. Just separate your name name:value pairs by commas and you should be good to go.

   1:      dojo.xhrPost(
   2:        {
   3:          url: 'ajax-student-test.php',
   4:          handleAs: "text",
   5:          timeout: 5000, // Time in milliseconds
   6:          content: { AppRequestType:"Initial Page Load" }, // Data to pass
   7:            
   8:          load: studentHandler, //Called on a successful response.
   9:          error: ajaxErrorHandler,   // Called in an error case.
  10:        }
  11:      );
  12:

Comment Filtered JSON with Dojo

As you may or may not know, I'm working on a project at work using the Dojo JavaScript Framework. I have been working on the JSON examples. When I tried to use the standard xhr JSON handler for my JSON text, I got a message stating I should use Comment Filtered JSON instead.

So what the h*#l is comment filtered json? After must searching around and a little testing I finally figured it out. To prevent some other poor bastard from doing the same search, here is an example.

   1:{
   2:  "name":"South",
   3:  "type":"COED",
   4:  "size":200,
   5:  "students":["John Smith", "George Washington"]
   6:}
   7:
   8:/*
   9:{
  10:  "name":"South",
  11:  "type":"COED",
  12:  "size":200,
  13:  "students":["John Smith", "George Washington"]
  14:}
  15:*/

Lines 1 to 6 are regular JSON text. Lines 8 to 15 are comment filtered. To make JSON text comment filtered, simply put the text in a comment. That's it.

Grabbing a Grid Row with Dojo 1.1

I'm working on a project in the Dojo 1.1 JavaScript framework at work. The framework is very comprehensive and powerful. It has all the widgets of a Visual Basic or Java Swing. However, at this stage of its development, let's say the documentation could be a little better.

So I'm using the Dojo Grid widget to view some tabular data. What I needed to do was allow a user to select a row from the grid and then click on a button. This pops up a dialog with the data in a form for the user to edit. Well I figured it out, but it wasn't easy. So I thought I should post this code example for any other poor souls trying to do the same thing. Here is the code.

   1:<div id="grid" dojoType="dojox.Grid" model="model" structure="structure"
   2: autoWidth="true"></div>
   3:<button dojoType="dijit.form.Button" id="updateButton">Update
   4: 
   5:<script type="dojo/method" event="onClick">
   6:    var row = dijit.byId('grid').selection.getSelected()[0];
   7:    var selected = dijit.byId('grid').model.data[row];
   8:
   9:    if (selected) {
  10:      dijit.byId("someFormField").setValue(selected[0]);
  11:    }
  12:</script>
  13:</button>

The real heart of the issue is on line 6 and 7. First, you need to use the Dojo dijit.byId() function to grab the grid and get the selected row. This returns a integer number identifying the row in the grid. You then pass this number to the data model which returns an array containing the row data.

On lines 9 to 11, array data is assigned to the form text field. Note I check to see if selected is not empty first. If a row has not been selected, the selected array will be empty and this will cause an error if you try to assign it to the field. If there is data in the array, then line 10 assigns the first column in the row to the field identified by its ID.

I saw examples that identified the column in the grid by its name, but I could not get that to work. Using the column index numbers seems to be the only method that works for me.

I hope this will help others trying to do the same thing. Good luck!