jQuery, JSON and jTemplates For Ajax driven Web app

jQuery is one best and easy JavaScript Library. There are thousand of plug-in to do endless thing to do on the web-page. The best thing is you don’t have to worry about will this code you written run on ie/opera etc. The Best way to make a web app or website is using Ajax. Obviously when you get a HTML using Ajax and replace or add in a HTML element – it consumes some time which does not look good. There is another solution – we can use JSON and template engine like jTemplates. jQuery has it own template engine but its beta version. jTemplates is quite easy to understand and develop. Its has conditional structure and also has foreach loop. So you can do a lot of things using this. I have develop many Facebook apps and website using jTemplates. Here is link of chat application show http://apps.facebook.com/chat-rooms/. In this tutorial i will show you multiple examples which you can download here. There are couple of functions are not described here – the main focus of this tutorial is show you the basic things.

Before we start, First download jQuery v1.6.2 and jTemplates from http://jtemplates.tpython.com/. I have used delegate so use jQuery v1.6.2 instead of latest version. In the latest version delegate is relace by on. All the JSON object is retrieved by $T. The template written like this

<script type="text/html" id="template"> 
</script>

The Conditional Statement
In this first example, We will see how the if-else / if-elseif-else work in jTemplates. First let see the php file which we will call in ajax.

$return_array['chk']=1;
echo json_encode($return_array);

The basic is always same. put all the data in an php array then json_encode the array. We echo the resulting json string.
Then we develop the template

<script type="text/html" id="template"> 
	{#if  $T.chk==0}
		The result is 0 
	{#elseif $T.chk==1} 
		The result is 1 
	{#else}
		The result is not 0 or 1
	{#/if}             
 </script>

The code is very simple. The main focus of This code is the $T.chk. As we set the php array like this $return_array[‘chk’] so chk json object will be available by $T.chk.

$(function() {
	$('body').delegate('#click_me', 'click', function (event){
		$.getJSON('/jquery-json-and-jtemplate-for-ajax-driven-web-app/demo-2-ajax.php',{}, function(data)
		{
			$container = $('#result');		
			$container.setTemplate($("#template").html());
			$container.processTemplate(data);
			$('#result').html($container.html());
		});
	});
});

Here is the code where the magic happens :). $(‘body’).delegate(‘#click_me’, ‘click’, function (event){ means when any one click the element which id is click_me then the code snippet will run. $.getJSON will load the json sting from the server and convert it to json object

. 
$container = $('#result');		
$container.setTemplate($("#template").html());
$container.processTemplate(data);
$('#result').html($container.html());

This the code where all the json datas are put on html template, then using html() function to put the html on result div.
You can see this on action http://fbapps.jambura.com/jquery-json-and-jtemplate-for-ajax-driven-web-app/demo-1.php

The Loop foreach
Let first see the php code

for($i=0;$i<20;$i++)
{
	$imgs[$i]['img']='http://blog.jambura.com/wp-content/uploads/2011/10/Ubuntu-logo.jpg';
	$imgs[$i]['name']='Ubuntu_'.$i;
}
$return_array['images']=$imgs;
echo json_encode($return_array);

The code is just add name and img in array. Then that array put in images key in $return_array array.

<table  width="261" cellpadding="0" cellspacing="0" border="0">
{#foreach $T.images as image}
    {#if $T.image$iteration == 0 || ($T.image$iteration%2)==0} 
        <tr>
    {#/if}	
    <td width="130" align="center">{$T.image.name}</td>
    <td width="130" align="center">
        <a href="{$T.image.img}"><img width="200" height="178" border="0" alt="image" src="{$T.image.img}"></a>
    </td>
    {#if ($T.image$iteration%2)==1} 
        </tr>
    {#/if}					
{#/for}
</table>

Here the foreach code is same as php’s foreach. $iteration – id of iteration (next number begin from 0). The delegate code is same

$(function() {
	$('body').delegate('#click_me', 'click', function (event){
		$.getJSON('/jquery-json-and-jtemplate-for-ajax-driven-web-app/demo-2-ajax.php',{}, function(data)
		{
			$container = $('#result');		
			$container.setTemplate($("#template").html());
			$container.processTemplate(data);
			$('#result').html($container.html());
		});
	});
});

You can get more details about the jTemplates here. You can download the code from jquery-json-and-jtemplate-for-ajax-driven-web-app.

About Zakir Hyder

This entry was written by .

18. December 2011 by Zakir Hyder
Categories: JavaScript, jQuery, jTemplate, Web Development | Tags: , , , , , , | Comments

Comments

  1. […] jQuery, JSON and jTemplates For Ajax driven Web app December 18, 2011 11:35 PM jQuery is one best and easy JavaScript Library. There are thousand of plug-in to do endless thing to do on the web-page. The best thing is you don’t have to worry about will this code you written run on ie/opera etc. The Best way to make a web app or website is using Ajax. Obviously […] […]