Asynchronous Form Submission With Xajax
Contents
Abstract
Several requests have crossed the PHPRO.ORG desk regarding xajax and form posting. Many of the requests deal with how to post a form to itself. Others have extended this and asked to do the same, and add a message saying it is done or other information. Further still, others have requested that the response have a visual effect from a javascript library such as mootools, scriptaculous or jquery. In this tutorial the process is broken into three parts to cover each of these processes. For the purpose of this tutorial the scriptaculous javascript library will be used to create a fade effect when the form is processed.
It is beyond the scope of this tutorial to cover the setting up of the scriptaculous library and users are pointed in the general direction of http://script.aculo.us/ to gain more information.
Post From To Self
Using xajax to post a form to itself is same as posting any other form. Usually this simply requires the form action to be omitted, or given a path to itself. It is only when the form is to be submitted asychronously that the response is different. By submitting asychronously, the page does not need to be refreshed, and any reponse from the form is displayed.
<?php
/*** include the xajax library ***/
include 'xajax/xajax_core/xajax.inc.php';
/*** a new xajax object ***/
$xajax = new xajax();
/*** Register the function ***/
$xajax->registerFunction("myFunction");
function myFunction($string)
{
if($string == 'wombat')
{
$content = 'Animal is a wombat';
$color = 'green';
}
else
{
$content = 'Animal is not a wombat';
$color = 'red';
}
/*** A new xajaxResponse object ***/
$objResponse = new xajaxResponse();
/*** assign the innerHTML attribute of to whatever the new $content ***/
$objResponse->assign("element_id","innerHTML", $content);
/*** assign a color to the element ***/
$objResponse->assign("element_id","style.color",$color);
/*** return the xajaxResponse object ***/
return $objResponse;
}
/*** process the request ***/
$xajax->processRequest();
/*** assign the generated javascript to a variable ***/
$xajax_js = $xajax->getJavascript('/xajax');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>PHPRO.ORG</title>
<?php
echo $xajax_js;
?>
</head>
<body>
<form name="my_form" id="my_form" method="post">
<input type="text" name="animal_id" id="animal_id" />
<input type="button" onclick="xajax_myFunction(xajax.$('animal_id').value);" value="Check Animal" />
</form>
<div id="element_id">Please enter an animal</div>
</body>
</html>
Stepping through the above script, it starts off innocently enough by including the xajax library and creating a new xajax object and then a function named myFunction is registered. The myFunction function performs a simply comparison of the data sent to it from the form. The function simply tests if the text sent is the word 'wombat'. If the the text matches, a message is created, and a color is set for the return text (green if it matches, red if it does not match).
When the string matching is resolved, a new response object is created. The magic happens in the next two lines of code.
<?php
/*** assign the innerHTML attribute of to whatever the new $content ***/
$objResponse->assign("element_id","innerHTML", $content);
/*** assign a color to the element ***/
$objResponse->assign("element_id","style.color",$color);
In the above two lines of code, the content is assigned to the innerHTML of the element with the ID of element_id. In the second line the color of the text is assigned in the same manner. The response object when returned updates these asychronously.
Adding Effects
As was seen above, the magic happens within the response object for asychronous display. This functionality can be extended to call and external javascript. Here the scriptaculous library is used to create a fade effect using the xajax script method.
The xajax script method allows the plugging in of external libraries and to make calls to functions within them. This is an method called from the xajax response object. The whole script is reproduced there with the javascript includes in place in the document head and the xajax script call.
<?php
/*** include the xajax library ***/
include 'xajax/xajax_core/xajax.inc.php';
/*** a new xajax object ***/
$xajax = new xajax();
/*** Register the function ***/
$xajax->registerFunction("myFunction");
function myFunction($string)
{
if($string == 'wombat')
{
$content = 'Animal is a wombat';
$color = 'green';
}
else
{
$content = 'Animal is not a wombat';
$color = 'red';
}
/*** A new xajaxResponse object ***/
$objResponse = new xajaxResponse();
/*** assign the innerHTML attribute of to whatever the new $content ***/
$objResponse->assign("element_id","innerHTML", $content);
/*** assign a color to the element ***/
$objResponse->assign("element_id","style.color",$color);
/*** apply and effect to the element_id ***/
$objResponse->script("new Effect.Opacity('element_id', { duration: 2.0, transition: Effect.Transitions.linear, from: 1.0, to: 0.5 });");
/*** return the xajaxResponse object ***/
return $objResponse;
}
/*** process the request ***/
$xajax->processRequest();
/*** assign the generated javascript to a variable ***/
$xajax_js = $xajax->getJavascript('/xajax');
?>
<html>
<head>
<title>PHPRO.ORG</title>
<script src="scriptaculous/lib/prototype.js" type="text/javascript"> </script>
<script src="scriptaculous/src/scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>
<?php
echo $xajax_js;
?>
</head>
<body>
<form name="my_form" id="my_form" method="post">
<input type="text" name="animal_id" id="animal_id" />
<input type="button" onclick="xajax_myFunction(xajax.$('animal_id').value);" value="Check Animal" />
</form>
<div id="element_id">Please enter an animal</div>
</body>
</html>
With the new changes in place, the call to the scriptaculous javascript library is completed and the fade effect is actioned when the script is called.
Be sure to check the paths to the scriptaculous libraries in the HTML head. This is often a cause of the effect not working.
If there are other effects you would like to see, simply contact us and it can be added to these examples.