Some very useful Dojo functions

Just another post on Dojo. Nothing special, just for self-reference.

dojo.query  

dojo.query() returns a list of DOM nodes based on a CSS selector.

dojo/query is the AMD module containing the query function in 1.7

dojo.forEach

Since the JavaScript forEach() function is not supported natively on every browser, dojo.forEach provides the standard JavaScript 1.6 forEach construct everywhere. dojo.forEach lets you apply a function to each element of an array, emulating a for loop.

dojo.forEach() cannot terminate a loop (except when throwing an exception). Use dojo.some() or dojo.every() instead.

The dojo.query and dojo.forEach example below retrieves the input elements of type "checkbox" within a node with id="sidebar". It then iterates thru the list and changes the input element's 'disabled' property.

	var checkboxes = dojo.query("#sidebar input[type=checkbox]");
	dojo.forEach(checkboxes,function(checkbox) {
		checkbox.disabled = !checkbox.disabled;
	});

http://dojotoolkit.org/reference-guide/1.7/dojo/query.html
http://dojotoolkit.org/reference-guide/1.9/dojo/query.html
http://dojotoolkit.org/documentation/tutorials/1.6/using_query/
https://dojotoolkit.org/reference-guide/1.7/dojo/forEach.html


dijit.findWidgets

Returns an array of all non-nested widgets inside the given DOM node.

var cpDivContainers = dijit.findWidgets(dojo.byId('divContainer'));
dojo.forEach(cpDivContainers, function(cp) {
	//destroy the widget (remove from the registry)
	cp.destroyRecursive();   	 
});	

Another example:

dojo.forEach(dijit.findWidgets(dojo.byId('divContainer')), function(w) {
	w.destroyRecursive();
});	

http://dojotoolkit.org/reference-guide/1.8/dijit/registry.html

Examples of dojo.xhrGet() function for AJAX development

The dojo.xhrGet() function is used for AJAX development with Dojo. This function has been replaced with dojo/request/xhr since Dojo v1.8.

The examples below are for users of older versions of Dojo.

Example of dojo.xhrGet where the object's property handleAs is set to 'text'. This means data returned from the server is in text format.  What those values do is instruct it to try and hand the data to the asynchronous callback functions in that format.

The ajax example below retrieves the data in text format. The data returned by the server is a html markup (which could be from a jsp or jspf). This text data becomes the content of a new dojox.layout.ContentPane object 'newPane' (a div to display the data). This is placed inside another contentpane (div) 'cpWidget' thru the function dojo.place().

var cpWidget = dijit.byId("cpWidgetId");
dojo.xhrGet({
 url: "SampleURL?" + getSomeParam() + "&" + getMoreParams() + "&categoryId=" + categoryId  + "&batch=no",
 handleAs: "text",
 load: function(data) {
  var newPane = new dojox.layout.ContentPane({
   content:data,
  }); 
   
  dojo.place(newPane.domNode, cpWidget.domNode,'first');
 },
 error: function(error) {
  alert('There was an error when retrieving information.\n' + error);
 }
}); 

Another ajax example retrieving data in text format.

dojo.xhrGet({
 url: "SampleURL?" + getParams(),
 handleAs: "text",
 load: function(data) {
  document.getElementById("mainDiv").innerHTML = data;
 },
 error: function(error) {
  alert('There was an error when retrieving information.\n' + error);
 }
});

The ajax example below retrieves the data in json format. The json data is used to populate the Option elements of a dijit.form.FilteringSelect object.

function buildYearFilteringSelect() {
 //fetch the 'YEAR' options
 var yearFS = dijit.byId("year");
 yearFS.store.root.options.length = 0;
 var xhrArgs = {
         url: "AjaxGetYearJSONURL",
         handleAs: "json",
         preventCache: true,     
         content: {
                "retrieveType": "YEAR"
         },
         error: function (error) { 
      errorHandle(error); 
         },
         load: function (data) {
         if(data.items != null && data.items.length > 0){ 
          yearFS.store.root.options[0] = new Option("YEAR", "Year");      
          for(var i=1;i<data.items.length;i++){
              yearFS.store.root.options[yearFS.store.root.options.length] = 
               new Option(data.items[i].value, data.items[i].value);
            }
          yearFS.attr('value','Year');
   yearFS.attr('displayedValue','YEAR');
   //use dojo.connect to call the _startSearchAll() method when the _onConnect event is triggered on the filtering select widget
   //then call the select() and focus() methods to automatically open the filtering select's menu
      dojo.connect(yearFS, '_onConnect', function (val) {
      yearFS._startSearchAll();
      document.getElementById('year').select();     
   } 
   yearFS.focus();   
         }
         }
 };
 dojo.xhrGet(xhrArgs); 
}