Xajax 0.5: Tips and Tricks: Using function specific callbacks (onRequest/onComplete/etc)






Xajax 0.5: Tips and Tricks: Using function specific callbacks (onRequest/onComplete/etc)

This tutorial shows you have how to have different callbacks for your xajax functions. It uses the new 0.5 beta 3 coding style, but the implementation for beta 1 or 2 is similar.

First, we need to register our function so xajax can call it. 

$reqSaveQuestion =& $xajax->register(XAJAX_FUNCTION, 'SaveApplicationAnswer', array(
    'onResponseDelay' => 'showLoadingMessage'
    ));


In the above PHP, the third parameter is an array of call options. The value being assigned to the onResponseDelay callback is the ** name of the javascript function to call **; We still need a javascript function with that name... probably in a script block in the head of the document: 

<head>
    <title>...</title>
    <?php $xajax->printJavascript() ?>
    <script type='text/javascript'>
        loadingMessage = function() {
            document.getElementById("Status").style.display = "block";
        }
    </script>
</head>

Now, if you want to assign a function to the onComplete callback as well, you simply need to add that parameter to the array: 

$reqSaveQuestion =& $xajax->register(XAJAX_FUNCTION, 'SaveApplicationAnswer', array(
    'onResponseDelay' => 'showLoadingMessage',
    'onComplete' => 'hideLoadingMessage'
    ));


And remember to declare this function as well in the script block in the head of the document as well.

Other functions can use the same callback functions, or they can use their own. Here's an example of what the completed code could look like. In this example, we have a form that we want a different callbacks to happen depending on which button the user pushes. One displays a hidden div with a loading message and the other disables the form and submits the application. I've added one line: 

$reqSaveQuestion->setParameter(0, XAJAX_FORM_VALUES, 'Application');

which just passes the form values to the SaveQuestion php function.

I've removed some of the basic stuff like css and the actual code for disabling the form, but you should get the idea. 

<?php
 include ("xajax.inc.php");
 $xajax = new xajax();
 $reqSaveQuestion =& $xajax->register(XAJAX_FUNCTION, 'SaveApplicationAnswer', array(
    'onRequest' => 'showLoadingMessage',
    'onComplete' => 'hideLoadingMessage'
    ));
 $reqSaveApplication =& $xajax->register(XAJAX_FUNCTION, 'SaveApplication', array(
    'onRequest' => 'disableScreen'
    ));
 $reqSaveQuestion->setParameter(0, XAJAX_FORM_VALUES, 'Application');
 $xajax->processRequest();
 ?>
 <html>
 <head>
    <title>...</title>
    <?php $xajax->printJavascript() ?>
    <script type='text/javascript'>
        showLoadingMessage = function() {
            document.getElementById("Status").style.display = "block";
        }
        hideLoadingMessage = function() {
            document.getElementById("Status").style.display = "none";
        }
        disableScreen = function() {
            ''code to disable the screen here''
        }
    </script>
 </head>
 <body>
 <form action='return false;' method='post'>
 Do you like bunnies?
 <input type='radio' name='Question1'>Yes
 <input type='radio' name='Question1'>No
 <input type='submit' value='SaveQuestion' onClick='<?php $reqSaveQuestion->printJavascript()?>'>
 <input type='submit' value='SaveApplication' onClick='<?php $reqSaveApplication->printJavascript()?>'>
 </form>
 <div id='Status' style='display: none;'>Loading...</div>
 </body>
 </html>

Special thanks to CtC for help with this solution. This was adapted from the forum post xajax Community Forums

Retrieved from "http://www.xajaxproject.org/wiki/Xajax_0.5:_Tips_and_Tricks:_Using_function_specific_callbacks_%28onRequest/onComplete/etc%29"