The JQuery team and Microsoft have been working on adding templates to JQuery. Today I’ll show you how to use the JQuery Templates and load data from PHP via AJAX.
Note: This was written against beta 1 of the JQuery Templates, things most likely will change and this code might need to be modified to continue working in future releases.
The PHP page is very easy and simply writes back some JSON.
File name: callajax.php
<?php
echo json_encode(array(array('manufacturer' => 'Apple', 'mobileDevice' => 'iPad2'),
array('manufacturer' => 'Motorola', 'mobileDevice' => 'Xoom'),
array('manufacturer' => 'Samsung', 'mobileDevice' => 'Galaxy Tab')));
?>
The HTML markup I’m going to use will look like this:
<script id="mobileDeviceTemplate" type="text/x-jquery-tmpl">
<li>
<strong>${manufacturer}:</strong> ${mobileDevice}
</li>
</script>
This will get rendered into this unordered list:
<ul id="ajaxResult"></ul>
When the Ajax is triggered it calls the PHP page and the onSuccess function is called to render the template to the browser:
$("#mobileDeviceTemplate").tmpl(data).appendTo("#ajaxResult");
The full code listing for the index.html page looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>JQuery Templates</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script>
$(document).ready(function(){
$("#callAjax").click(function() {
$.ajax({
type: "POST",
dataType: 'json',
url: "http://localhost/JQTemplates/callajax.php",
cache: false,
async: true,
success: onSuccess
});
});
function onSuccess(data)
{
$("#ajaxResult").empty();
$("#mobileDeviceTemplate").tmpl(data).appendTo("#ajaxResult");
}
});
</script>
<script id="mobileDeviceTemplate" type="text/x-jquery-tmpl">
<li>
<strong>${manufacturer}:</strong> ${mobileDevice}
</li>
</script>
</head>
<body>
<input type="button" id="callAjax" value="Call Ajax"></input><br /><br />
<ul id="ajaxResult"></ul>
</body>
</html>
Here are the results:
Good basic description of jquery templates. Would like to see more of this as well as using the templates with jsonp data
Thanks!
yes…its quietly simple tutorial but it’s usefull.. if i have to implement jQuery template in real world apps then my client side script with full of large of bunch of html template..would that cost roundtrip performance?? ..thanks
@Noel,
You just need to determine how much data your pushing to the client. Typically this won’t be anything to be concerned about. Nowadays most people/places have good amounts of bandwidth available to them as they are streaming video and audio, etc. Depends on what your target devices are, ie: mobile? desktop? With mobile you might want to take into consideration the slower 3g networks, etc.
There is always compression you could tinker with on the web server.
Chad