Packt+ | Advance your knowledge in tech

You're reading from PHP Ajax Cookbook Over 60 simple but incredibly effective recipes to Ajaxify PHP websites with this book and ebook

Product type Paperback

Published in Dec 2011

Publisher

ISBN-13 9781849513081

Length 340 pages

Edition Edition

Languages

PHP

Tools

ASP.NET AJAX

Concepts

Front End Web Development

Table of Contents (16) Chapters

PHP Ajax Cookbook

Credits

About the Authors

About the Reviewers

www.PacktPub.com

Preface

1. AJAX Libraries FREE CHAPTER

2. Basic Utilities

3. Useful Tools Using jQuery

4. Advanced Utilities

5. Debugging and Troubleshooting

6. Optimization

7. Implementing Best Practices to Build Ajax Websites

8. Ajax Mashups

9. iPhone and Ajax

Index

Building a tab navigation using Dojo

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.