Separating Content from Presentation the Dojo Way
by Gerald Lopez

One of the cool things about Dojo is the dojo.xhrGet() function. It’s powerful because it makes transparent the browser dependent transports that make AJAX possible. In this cookie, we’re going to explore a simple use case in Dojo to separate content from the presentation of a page. This means that if you want to update some content of a specific portion of a page, you may not want to require the user to ‘refresh’ the entire page to see the new content. Instead, we’re going to dynamically load that content from a separate file into the page called by the user. Finally, even while the user may be viewing the page, changes to the content will be refreshed immediately when the user calls again for the that same content.

As a practical application, we’re going to use a dijit.layout.AccordionPane nested inside a dijit.layout.AccordionContainer to be responsible for calling the necessary AJAX function that will dynamically load its content.

See It First

Before we start, download the source code for this cookie: ajaxpresentationcontent.zip. Load presentation.html into your favorite browser and play with the Accordion Panes. You should see something like the image to the right. If using Internet Explorer, you may have to “Allow blocked content.” Nothing in particular will happen. You should be able to open and close the Accordion Panes. Now, to witness the power that is Dojo-enabled-AJAX:
  1. Keep the browser open.
  2. Modify the content.html file with some mark-up like the following:
    <H1>Hello and welcome</H1> to the site.
  3. Save the changes.
  4. Now, go back to your browser and open and close the Dynamic Content pane.

What you should have noticed is that your changes to the content of the Dynamic Content pane were immediately refreshed when you re-opened it. There are a few nuances that must be met to achieve this effect. It is my hope that this cookie will give you that insight.

Let’s Begin

To enable this cool feature, the process entails creating 2 things: the implementation of the functionality of the page to load content upon user interaction, and the creation of a separate file containing the content of interest. Be sure that the content file is stored in the same location as the page loading the file. This means you cannot load the content.html file from another server; it must reside on the same server-a small security issue that beginners to AJAX won’t find out much after debugging and googling on the net.

We’re first going to create the latter: a page fragment in a file called “content.html” with the following:

Hello and welcome to the site.

The second thing we’re going to do is create a the page we want to dynamically update using dojo.xhrGet() with the following function:

function loadText(fragmentURL,nodeName){
   dojo.xhrGet( {
     url: fragmentURL,
     handleAs: "text",
     preventCache: true,
     load: function(response){ dojo.byId(nodeName).innerHTML = response; }
   });
}

This function bears a striking resemblance to something found in Neil’s Functional Ajax with Dojo which showcases more advanced hacking techniques using dojo.xhrGet(). Notice, however in the function above, that we’re using the preventCache property for dojo.xhrGet(). This is very important: if you don’t have this option set, by default it is false, and browsers like IE and Safari may cache the initial call to the URL. This becomes particularly apparent when you are trying to call the page nested in a parent frame. By the way, there are tons more properties for dojo.xhrGet() … check it out in the Dojo Toolkit Documentation.

Now, we’re going to build the interface that will be responsible for calling the function to load our content file. In the body of the document, we’re going to have a square AccordionContainer with 2 AccordionPanes like so:

	<div dojoType="dijit.layout.AccordionContainer" style="width:300px;height:300px;" duration="300">
		<div dojoType="dijit.layout.AccordionPane" title="Static Content">Here is some static content.</div>
		<div dojoType="dijit.layout.AccordionPane" title="Dynamic Content" onSelected="loadText('content.html','dynamicContent');">
			<div id="dynamicContent"></div>
		</div>
	</div>

The first AccordionPane titled “Static Content” is just that. Nothing is dynamic about it and it will be the first thing you see. In addition, the content is inline with the layout. The second pane titled “Dynamic Content” has a nested div with the id=’dynamicContent’. So, when the pane is selected, it will call loadText(), passing the parameters ‘content.html’ for the filename location and ‘dynamicContent’ for the div to update.

Now load the page into your browser and select the “Dynamic Content” pane. Keep the browser open. Now, open the content.html file in and editor, modify it to say:

<h1>Hello</h1> Welcome to the site my friend.

and save it. Go back to your browser, select the “Static Content” pane and then “Dynamic Content” pane and watch the magic happen.

Cool huh? The power of this means you never have to worry about a user’s browser cache having to be refreshed in order for him to see the changes you made to your content. Moreover, you now never have to read through the mark-up of your layout to make changes.

The obvious drawback to such an approach is that subsequent actions selecting the “Dynamic Content” refreshes the content every time, which increases network traffic and the server load. You can see this using FireBug. However, there are work-arounds with the concept shown to reduce this impact, but those details are left to you :)

Tags: , , , ,

This entry was posted on Wednesday, June 18th, 2008 at 12:19 pm and is filed under Beginners, Dojo Cookies. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “Separating Content from Presentation the Dojo Way”

  1. 5 Easy Tutorials for Advanced JavaScript using Dojo | Kyle Hayes Says:

    [...] Separating Content from Presentation One of the cool things about Dojo is the dojo.xhrGet() function. It’s powerful because it makes transparent the browser dependent transports that make AJAX possible. In this cookie, we’re going to explore a simple use case in Dojo to separate content from the presentation of a page. View tutorial >> [...]

  2. Dojo Javascript Framework Toolkit, Take your Apps to the Next Level | tripwire magazine Says:

    [...] Separating Content from Presentation [...]

  3. Getting StartED with Dojo » 5 Easy Tutorials for Advanced JavaScript using Dojo Says:

    [...] Separating Content from Presentation One of the cool things about Dojo is the dojo.xhrGet() function. It’s powerful because it makes transparent the browser dependent transports that make AJAX possible. In this cookie, we’re going to explore a simple use case in Dojo to separate content from the presentation of a page. View tutorial >> [...]

Leave a Reply

You must be logged in to post a comment.