PHP Ajax Cookbook

Now we will have a look at Dojo JavaScript Library. We will build a simple tab navigation using the basic functionality of the Dojo Toolkit (dojoToolKit).

Getting ready

We need to include the Dojo Toolkit from websites such as Google CDN (http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js) or AOL CDN (http://o.aolcdn.com/dojo/1.5/dojo/dojo.xd.js).

If you want to download the whole Dojo SDK you can find it at www.dojotoolkit.org/download.

The landing page for Ajax requests will be ajax/content1.html:

<body>
  <h1>Operation completed.</h1>
</body>

How to do it...

We will include styles from the claro theme (included in dojoToolKit) in the <head> tag of our document:
```
<link rel="stylesheet" type="text/css" href="js/dojoToolKit/dijit/themes/claro/claro.css" />
```

We will define our HTML code in the body of our document:

<body class="claro">
<div>
  <div dojoType="dijit.layout.TabContainer">
    <div dojoType="dijit.layout.ContentPane" 
      title="Our first tab" selected="true">
        <div id="showMe"> 
          click here to see how it works
        </div> 
    </div>
    <div dojoType="dijit.layout.ContentPane" 
        title="Our second tab">
      Lorem ipsum - the second
    </div>
    <div dojoType="dijit.layout.ContentPane" 
  title="Our last tab" closable="true">
    Lorem ipsum - the last...
    </div>
  </div>
</div>
</body>

When the HTML and CSS is ready, we will include DojoToolkit with required modules:

<script type="text/javascript"
  src="js/dojoToolKit/dojo/dojo.js" 
  djConfig="parseOnLoad: true"></script>
    
<script type="text/javascript">
  dojo.require("dijit.layout.TabContainer");
  dojo.require("dijit.layout.ContentPane");
</script>

Adding JavaScript functionality gives us the following:

<script type="text/javascript">
  dojo.addOnLoad(function() {
    if (document.pub) { document.pub(); }
    dojo.query("#showMe").onclick(function(e) {
      dojo.xhrGet({
        url: "ajax/content1.html",
        load: function(result) {
          alert("The loaded content is: " + result);
        }
      });
      var node = e.target;
      node.innerHTML = "wow, that was easy!";    
    });
  });
</script>

When the preceding code snippet is ready and saved, our result will be a simple tab navigation with three tabs.

How it works...

As you can see in the source, we are using the Dijit-Dojo UI component system. Dijit is included in Dojo SDK and includes UI components with four supported themes (nihilo, soria, tundra,and claro). We can set which theme we want to use by selecting a class within our <body> tag. In the preceding example we have class="claro".

We need to provide the djConfig attribute with parseOnLoad:true when we include the dojoToolKit script. Without this, Dojo won't be able to find the page elements that should be converted to Dijit widgets.

When we want to use a specific widget, we need to call the required class for the widget (dojo.require("dijit.layout.TabContainer")) and provide its dojoType attribute (dojoType="dijit.layout.TabContainer"). As an example of using Ajax in Dojo, we use the dojo.xhrGet() function to get the content of ajax/content1.html each time we click on showMe div.

PHP Ajax Cookbook

PHP Ajax Cookbook

Overview of this book

Related Content you might be interested in

Current Title:

PHP Ajax Cookbook

Building a tab navigation using Dojo

Getting ready

How to do it...

How it works...