Ajax – Tabbed Widget with Prototype and JSON
The rise of Ajax has led to a development of interactive UI elements for HTML pages. A realm for the use of Flash in the past, JavaScript, CSS and asynchronus data transfer brought up a bunch of interface widgets ready to use in plain webpages. Breaking free of the “click -and-wait” paradigm that ruled web development since the beginnig, developers are now free to bring new and fresh features to to websites to create an unprecedented user exeprience.
One of those widgets are tabbed interfaces. Formerly a pain to develop with a wild mixture of frames, scriptes and a lot of single pages, Ajax now allowes to code slim and easy to use elements. The example showes a small tabbed interface element that uses JavaScript and CSS on the clientside an a PHP script to deliver the data on the server. The communication is done with HTTP requests.
The HTML code is really simple. An unorderd list for creating the tabs and a div which contains the contents from the server. All syles with stylesheets, this builds the layout of the widget. Note that there are no handlers in the code neither. The tabs are observed by JavaScript event handlers.
<li id="tab1"><a href="#">One</a></li>
<li id="tab2"><a href="#">Two</a></li>
<li id="tab3"><a href="#">Three</a></li>
</ul>
<div id="body">
There are a lot of new script libraries available now which offer developers a set of tools for crossbrowser coding and DOM manipulation. Prototype is a lightweight and easy-to-use javascript library wich fits perfect for rapid and intuitive development of class-driven Ajax applications.
One of its features are event observers. The snippet shows how these observers are bound to the tabs from the HTML code. The handling of the event is delegated to a special Tab class, designed for managing the tabs by switching the CSS styles and initiating the HTTP Request for loading the right content.
Tab.prototype = {
initialize: function(){
this.curTab = undefined;
this.loader = loader;
this.pagerender = new PageRender();
},
use: function(element){
Element.removeClassName(this.curTab, 'on');
this.curTab = $(element);
Element.addClassName(this.curTab,'on');
var vars = 'id=' + element;
this.loader.load(vars);
},
onLoad: function(data){
this.pagerender.render(data.parseJSON());
}
}
// create new instance
var me = new Tab();
// observe tabs
Event.observe('tab1', 'click', function(e){me.use('tab1');});
Event.observe('tab2', 'click', function(e){me.use('tab2');});
Event.observe('tab3', 'click', function(e){me.use('tab3');});
As XML is not the format of choice for Ajax codes anymore, JSON (JavaScript Object Notation) does a great job in offering a compact coding structure for data exchange between the client and backend. On the serverside, PHP selects the proper data based on POST data from the Request and returns the encoded structure as a response back to JavaScript.
header("Content-Type: text/plain; charset=UTF-8");
require_once("include/JSON.php");
$data = array(
// array data in here
);
$json = new Services_JSON();
echo $json->encode($data[$_POST["id"]]);
?>
The rest is just decoding the retrieved data an write it back to the HTML widget element on the screen.
Check out the widget example or download the sources: Ajax tabbed widget
Comments are closed.