Dynamic dojo.E

> > >

We have been using the script tag to load dojo.E in our pages. While this has served us well so far, it has limitations. Primarily, that we need to define what we want dojo.E to do before we load the page. This would limit the range of functionality that we can achieve with dojo.E. However, we can overcome this limitation by requesting and processing the dojo.E code dynamically. This allows us to define any kind of new transformations after the page has been loaded.

Here is an example:

 
 
<script type="text/javascript" src="js/dojo-release-1.1.1/dojo/dojo.js.uncompressed.js"
            djConfig="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript">
      dojo.require("dijit.form.Button");
      dojo.require("dojoe.dojoe");
</script>
<h1 class="testTitle">Test Dojo.E: Process XModify Asynchronously.</h1>
<button onClick="dojoe.processRequest({method: "GET", url: "AddGreeting.xml"});"
       dojotype="dijit.form.Button">Greet !</button>
<p id="testDescription">A greeting line should appear each time you click the button.</p>

As you can see, in this example we use the "dojoe.processRequest" JavaScript function to make dynamic HTTP requests of new dojo.E code and to process it on the fly. This function relies on the dojo.xhr's functions to make the HTTP request. It also takes the same input parameters as dojo.xhrXxx and also returns a deferred object. See the dojo.xhrXxx page of the Dojo Book for more information.

The HTTP response could look like this:

 
<dojoe.Xmodify>
    <insert-after query="p[id='testDescription']">
         Yeah I was just added :)
    </insert-after>
</dojoe.Xmodify>

Note: You can try the previous example by simply saving the contents of the HTTP response in a file in the same directory as your page and naming it AddGreeting.xml.