Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

InlineXHR(php) (gallery-inline-xhr) on cdn

Last Updated: 10/25/11

+ 0 -

paolo nesti poggi

YUI Contributor

See 2 more by this user.

Created: 04/20/11
Last CDN Push: 10/27/11
Build Tag: gallery-2011.10.27-17-03
Project: YUI 3
License: YUI BSD
YUI Version: 3.4.1
Free for use.

I used to use xajax and loved it for how simple it was to use AJAX from PHP. With this module (JavaScript and PHP) it is possible to work in PHP about the same way as in XAJAX, though using YUI3 for the client side saving the overhead of an additional JS library.

The PHP part is based on Satyam's PhpJson code, packaged in a kind of dispatcher pattern to encapsulate the whole AJAX transaction for the user into one single $response object.

You can now:

Interact with PHP, by default, on the same url as the current page (no troubles setting up separate permissions for the PHP url and the html url)
You can call a PHP function/method on that url in a straightforward way.
You can group several transactions to be fired together.
From within the PHP function you can call directly a javascript function (that is living inside YUI().use(...){ } )
During the same transaction, from the same or different PHP functions you can call several JS functions, to be executed one after the other.

A waiting spinner is setup automatically, failures are managed automatically.
Use GET or POST and form scrub.

To see a functioning version of the example below and detailed description and installation instruction go to the project page

NB! The YUI 3 module is in the gallery while the PHP code is downloadable from its own github repo at: [https://github.com/tribis/inlineXHR--php-]

In the PHP part:

start the engine

$ajaxProcessor = new ajaxProcessor();

$ajaxProcessor->process();

//write your PHP application

//you can pass around the $response as you wish, when you're finished adding data and JS 

//functions to be called, send the response

function myPhpFunction($params,&amp;$response){

    

    //do whatever

//add something to the response

         $myArray = array(first=>"One", second=>"two");

         $params = array_merge($myArray,$params);

        //decide which JavaScript functions will be executed and passed the response data to

    $response->callMethod('showResult', $params);

       

        $response->callMethod('alertResult', $params);    

    

    $response->reply();

}

The HTML part could be something like:

<form id="form1" >

                    <input name="myinput1" type="text" value="myvalue1"/>

                    <input name="myinput2" type = "text" value="myvalue2"/> 

                </form>

<br />

<input id="requestButton" type="button" name="test" value="test"></input>

<br />

<br />

<div id="result"></div>

For the JS part see the code sample below

Code Sample

<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.10.27-17-03'
}).use('gallery-inline-xhr', function(Y) {
 
 
    //write something to use the response from the server
    Y.showResult = function (result) {
 
					var r = Y.Node.create('<div>' + result + '</div>');
					var resultWindow = Y.one("#result");
					if(resultWindow.getStyle('backgroundColor') !== 'ivory'){
						resultWindow.setStyle('width','300px');
						resultWindow.setStyle('height','200px');
						resultWindow.setStyle('overflowX','hidden');
						resultWindow.setStyle('overflowY','auto');
						resultWindow.setStyle('border','2px solid #cecece');
						resultWindow.setStyle('padding','7px');
						resultWindow.setStyle('backgroundColor','ivory');
					}
					resultWindow.append(r);
 
				}
    //and a second func, just for fun
    var Y.alertResult = function(r){
           alert(r);
   }
 
 
    var xhr = new Y.Base.InlineXhr({method: 'POST'}); //configure and instantiate
 
   //decide which function you're going to execute on the server, pass data to it
  //in this case both a couple of manually set vars and the contents of a form
    var group1 = xhr.register("scriptGroup1", "myPhpFunction", "user=meUser&password=mySecret", "#form1");
 
    //send the POST request
    //note that the function group ("group1" here) must be passed as the context to the event handler
    Y.on("click", group1.request, "#requestButton", group1);
 
//   On click both showResult and alertResult will be triggered by the response
 
});

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.10.27-17-03'
}).use('gallery-inline-xhr', function(Y) {

//write something to use the response from the server
    Y.showResult = function (result) {

var r = Y.Node.create('<div>' + result + '</div>');
					var resultWindow = Y.one("#result");
					if(resultWindow.getStyle('backgroundColor') !== 'ivory'){
						resultWindow.setStyle('width','300px');
						resultWindow.setStyle('height','200px');
						resultWindow.setStyle('overflowX','hidden');
						resultWindow.setStyle('overflowY','auto');
						resultWindow.setStyle('border','2px solid #cecece');
						resultWindow.setStyle('padding','7px');
						resultWindow.setStyle('backgroundColor','ivory');
					}
					resultWindow.append(r);
					
				}
    //and a second func, just for fun
    var Y.alertResult = function(r){
           alert(r);
   }

var xhr = new Y.Base.InlineXhr({method: 'POST'}); //configure and instantiate

//decide which function you're going to execute on the server, pass data to it
  //in this case both a couple of manually set vars and the contents of a form
    var group1 = xhr.register("scriptGroup1", "myPhpFunction", "user=meUser&password=mySecret", "#form1");

//send the POST request
    //note that the function group ("group1" here) must be passed as the context to the event handler
    Y.on("click", group1.request, "#requestButton", group1);

//   On click both showResult and alertResult will be triggered by the response

});

Forum Posts

Subject	Author	Date
Different from RPC?	John Lindal	04/22/12
Re: Different from RPC?	paolo nesti poggi	04/24/12