balupton edited this page Sep 13, 2010 · 2 revisions
Clone this wiki locally

jQuery Smarty

Project Page
Demonstration Page

The jQuery Smarty project supports the Smarty templating language (one of the most popular with PHP). This project supports a number of advanced features:

  • Pseudo variables – You can use a special set of variables in a template such as the $smarty.foreach.theForeach.first variable that represents the current index of a template instance.
  • Ajax templates – You can include template files automatically with AJAX by using {include file='include.tpl'}
  • OnChange: Auto Update Modifier – By using the auto_update modifier, it will update the corresponding template block if any of the variables have changed. For example: {$title|default:"No title, so expect the rest to be blank as well..."|capitalize|auto_update}. or specify a selector to update: {$title|capitalize|auto_update:"title_span"}
  • OnChange: Event – You can hook into variable onchange events and add your custom handler – for instance if the $title variable updates, you can have a onchange handler to update document.title with the new value if the title variable changes.

Here is some sample usage demonstrating assigning, rendering, and onchange events.

{foreach from=$tuples key=theKey item=theItem name=theForeach}
	{cycle values='odd,even' assign='class'}
	{if $smarty.foreach.theForeach.first}
		 {assign var='class' value=$class|cat:' first'}
	{elseif $smarty.foreach.theForeach.last}
		{assign var='class' value=$class|cat:' last'}

{$smarty.foreach.theForeach.index}|{$smarty.foreach.theForeach.iteration} : {$theItem.custid}, {$theItem.name}, {$theItem.address}


$(function() {

var data = {
“custids”: [1001,1002,1003],
“names”: [‘John Smith’,‘Jack Jones’,‘Jane Munson’],
“addresses”: [‘253 Abbey road’, ‘417 Mulberry ln’, ‘5605 apple st’],
“now”: “now”,
“date”: ‘%I:%M %p’,
“time”: ‘%H:%M:%S’,
“yesterday”: “-1 day”,
“tuples”: {
“1001”: {
“custid”: 1001,
“name”: ‘John Smith’,
“address”: ‘253 Abbey road’
“1002”: {
“custid”: 1002,
“name”: ‘Jack Jones’,
“address”: ‘417 Mulberry ln’
“1003”: {
“custid”: 1003,
“name”: ‘Jane Munson’,
“address”: ‘5605 apple st’
// console.log(‘before assign’);
// console.log(‘after assign’);

// Copy templates over
var $this = $(this);
$this.find(‘.details .result .content.smarty’).html(
$this.find(‘.details .code .content’).html()

// Populate

// Add onchange hanlders
$.Smarty.onchange(‘title’, function(old_value, new_value){
$(‘html > head > title’).html(document.title = new_value);
alert(‘Title has changed from [’+old_value+’] to [‘new_value’]’);