InlineXHR - A working example of AJAX transaction with a Smarty plugin and YUI 3

Click to find here a more detailed explanation of this easy to use ajax PHP framework.

On the current page we have a working example of how easy it is to establish communication beetween the YUI 3 JavaScript code running in the browser and a PHP Smarty plugin running on the server.

What we are demoing - 2 way client server transactions using Smarty and YUI 3

This page simulates a typical Smarty setup where a template processed by Smarty is outputting the content of the page.

Among other things this content entails some YUI 3 code, which by the way is the library for developing industrial strenght JavaScript applications. In this case we have a SliderWindow in the page. Open it now by hitting Ctrl - right arrow.

With inlineXHR, a couple of oneliners is enough to be able to:

Use it with both Smarty 2 or 3.

What happens on the page

In this demo a button is shown, an event is attached to the button that sends a request to a Smarty plugin named "get_tpl".

It resolves to the smarty function "smarty_insert_get_tpl".

The named plugin, accepts an argument of "tpl" that indicates the name of the template it must provide to the script.

The plugin fetches the template and sends the content as the first argument to a method "sendMessage" of the JavaScript object "sw" (SliderWindow). The second argument is "open", to let the sliderWindow stay open after having shown the content.

The "clear" botton activates the SliderWindow directly from the page, with no transaction to the server.

Enjoy!


 
YUI({
	modules: {
			'gallery-inline-xhr': {
				fullpath: '/gallery_js/inline-xhr/gallery-inline-xhr.js',
				requires: ['json-parse', 'node', 'io-base', 'base','io-form']
				},
			'gallery-slider-window': {
				fullpath: '/gallery_js/slider-window/gallery-slider-window-debug.js',
				requires: ['overlay', 'node', 'anim-base','anim-node','anim-easing', 'substitute', 'resize']
				}
			}
	/* gallery: 'gallery-2011.05.12-13-26' */
}).use('gallery-inline-xhr', 'gallery-slider-window', function(Y) {
	
	/*
	 For this demo we use SliderWindow, a YUI 3 module based on overlay
	 http://yuilibrary.com/gallery/show/slider-window
	*/
	var sw = new Y.Overlay.SliderWindow(
			{
		/* watch out for commas when removing comments */
		/*		id: "slider_1", as default YUI3 sets an id */			
		/* 		height: "287px", default, optional */
		/*		openWidth: "400px",  default, optional */		
		/*		handleWidth: "5px",  default optional */
		/*		closeTitle: "Click to close/open or ctrl-left/right arrow to close/open",  optional */
		/*		zIndex: 0,  default, optional */
		/*		credit: true,  default, optional */
				resizing: true /* default is false, optional */
		/*		bodyContent: '', default, optional */
				
			}
		)
	sw.render();

	var xhr = new Y.Base.InlineXhr();//default is POST, GET also available
	xhr.setConfig({method: 'GET'});


	//get_tpl is a Smarty plug-in: smarty_insert_get_tpl.php
	var reqs ;
	reqs = xhr.register(reqs, 'get_tpl', '&tpl=login_form.tpl');

	
	// Let's bind some of the module's methods to inlineXHR.
	//In this way the Smarty plugin can invoke and pass arguments to these methods
	xhr.bind(sw,['sendMessage','set']);
	//binding 'sendMessage' we can populate the sliderWindow with content,
	//binding 'set' we can configure it, on the fly, from the server
	
	//send the request to the plugin
	Y.on("click", reqs.request, "#requestLogin", reqs);
	
	//access sw directly
	Y.on("click",Y.bind('sendMessage',sw,''),"#clearButton");

 
});


Smarty and inlineXHR setup

In our case we even load and configure the main inlineXHR file via a Smarty insert plugin. Do as you see fit based on your setup. The required steps are shown in plain PHP code below:

//start Smarty
require 'Smarty/Smarty_extended_classes/www.eaktion.com_Smarty.class.php';
$smarty = new eaktion.com_Smarty();

//include the inlineXHR file
require 'my_classes/ajax/inlineXHR.inc.php';

//instantiate and configure
$classname  = false;
$debug		= false;
$ajaxProcessor = new ajaxProcessor($classname, $debug);
$ajaxProcessor->configure('method','GET');
$ajaxProcessor->configure('extension','smarty2_insert_process_extension');

//start the xhr processing
$ajaxProcessor->process($smarty);//OBS! using an extension you must pass in the Smarty object

The Smarty plug-in

The insert function used in this example is quite simple and it is shown below:


/**
* Smarty {get_tpl} insert plugin
* 
* Type:     insert
* Name:     get_tpl
* Date:     Aug 17, 2011
* Purpose:  Outputting tpl to XHR request response
* Output:   

* @author eaktion.com 
* @version 1.0
* @param object $smarty Smarty object
* @param object $response response object
* @return void 
*/
function smarty_insert_get_tpl($params, $response, $smarty)
{

    $tpl = $params['tpl'];
    
    if(false !== strpos($tpl, '..')){
        $smarty->trigger_error("Smarty function 'get_tpl': Invalid path name.");
    }
    $tplPath = 'ajax_tpls/' . $tpl;
    $res =  $smarty->fetch($tplPath);
    
	//here you invoke your JavaScript code,
	//pass as many arguments as needed, they will be JSON encoded
    $response->callMethod('sendMessage',$res, 'open');
    $response->reply();
}

Go download it and keep me posted about how you're doing!