---

Dojo, Dijit and DojoX documentation

Dojo home page - Documentation - Reference Guide (Dojo - Dijit - DojoX ) - API

Community - Bug tracker

---

Dojo CDN

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></script>

THIS NEED A FALLBACK ! Anyone ? Maybe this one : A Simple and Robust jQuery 1.4 CDN Failover in One Line
Are CDN useful ? see Should You Use JavaScript Library CDNs ?

Use a Dojo module

dojo.require("dojo.fx");

Dojo ready

dojo.ready(function(){ /* code here */ });  

Select / manipulate the DOM

Dojo Dom reference

dojo.create("li", {  
    innerHTML: "myText",  
    className: "myClass",  
    style: {  
      fontWeight: "bold"  
    }  
  }, aDomNode, "after");  
 
  // third param can be "before", "after", "replace", "only", "first", or "last"  
  dojo.place(node, refNode, 'first');   
  dojo.place("<div class='myClass'>Toto</div>", refNode, 'last');  
 
  dojo.destroy("someId");  
 
  node = dojo.byId("elementId");  
  node.innerHTML = 'toto';  
 
  var list = dojo.query("#list"); // or ".myClass"  
  // ! query all DOM  
  var odds1 = dojo.query("#list .odd");  
  // query restricted to 'aDomNode' -> FASTER  
  var odds2 = dojo.query(".odd", aDomNode);   
 
  // NodeList  
  // doc at : http://dojotoolkit.org/reference-guide/dojo/NodeList.html  
  dojo.NodeList.forEach( function( node, nodeIndex, nodeList ){  
    dojo.addClass(node, "red");  
  });  

Events

// connect on DOM node  
  var handle = dojo.connect(domNode, "onclick", function(evt){ /* code */ });  
 
  // on NodeList  
  NodeList = NodeList.connect("onclick", function(evt){ /* code */ });  
 
  // disconnect  
  var handle = dojo.connect(myButton, "onclick", function(evt){  
      // Disconnect this event using the handle  
      dojo.disconnect(handle);  
       // Do other stuff here that you only want to happen one time  
      alert("This alert will only happen one time.");  
  });    
 
  // event scoping  
  var myScopedButton1 = dojo.byId("myScopedButton1"),  
      myScopedButton2 = dojo.byId("myScopedButton2"),  
      myObject = {  
          id: "myObject",  
          onClick: function(evt){  
              alert("The scope of this handler is " + this.id);  
      }  
  };  
 
  // This will alert "myScopedButton1"  
  dojo.connect(myScopedButton1, "onclick", myObject.onClick);  
  // This will alert "myObject" rather than "myScopedButton2"  
  dojo.connect(myScopedButton2, "onclick", myObject, "onClick");  

Broadcasting events

Subscribing with scope

// subscribe a function to a channel
handle = dojo.subscribe("foo-bar", function( arg1, arg2 ){ /* handle */ });  
 
// any event can publish  
dojo.publish("foo-bar", [ arg1, arg2 ]);  
 
// disconect from channel  
dojo.unsubscribe(handle);  

Ajax

Dojo ajax tutorial - Dojo Ajax reference - Dojo json - Dojo ajax api

// The "xhrGet" method executing an HTTP GET
dojo.xhrGet({  
    // The URL to request  
    url: "garden/xhr/get-json.php",  
    // return format default 'text  
    // can be json, javascript, xml  
    // if handled like js, use it like window.myvar in xhr callbacks  
    // normally accessed in the global scope : myvar  
    handleAs: 'text',  
    // block until data is returned !! Block browser  
    sync: true,  
    // prevent browser caching : default false  
    preventCache: true,  
    // Allow only 2 seconds for the response  
    timeout: 2000,  
    // content sent to server in get querystring  
    content: {  
        message: text  
    },                  
    // The method that handles successful request  
    load: function(result, ioArgs) { /* code */ },  
    // The method that handles errors      
    error: function(errorMessage){ /* code */ },  
    // always fired method  
    handle: function(response, ioArgs){ /* code */ },  
    // send error message to browser console - default : false  
    failOk: true          
});          

Effects and animation

Dojo effects tutorial - Dojo animation tutorial - Dojo Reference -