PHP Xajax Loading Message
Here we have a little Xajax script that displays a loading image while a task is happening on the server. This has sometimes been referred to as a poor mans progress bar. While it could be used for that purpose, the task may not be a file upload, instead it could be crunching larged data sets from a database or reading large XML input etc. The displaying of some sort of message is important so the end user does not click off in the belief that something is broken.
Note in this example a small amout of xajax directly in the document head.
<?php
/*** include the xajax libraries ***/
include './xajax/xajax_core/xajax.inc.php';
/**
*
* @Do something that takes a little time
*
* @return object
*
*/
function loading_function()
{
/*** a new object response object ***/
$objResponse = new xajaxResponse();
/*** pretend to load some data ***/
sleep(3);
/*** show an alert when the task is done ***/
$objResponse->alert("Loading Complete");
/*** return the object response ***/
return $objResponse;
}
/*** a new xajax object ***/
$xajax = new xajax();
/*** register the loading_function ***/
$xajax->registerFunction('loading_function');
/*** process the request ***/
$xajax->processRequest();
/*** stuff the xajax javascript into a variable ***/
$xajax_js = $xajax->getJavascript('/xajax');
?>
<html>
<head>
<?php echo $xajax_js; ?>
<script type="text/javascript">
xajax.callback.global.onRequest = function() {xajax.$('loading').style.display = 'block';}
xajax.callback.global.beforeResponseProcessing = function() {xajax.$('loading').style.display='none';}
</script>
<style type="text/css">
#loading {
display: none; /* hidden */
position: absolute;
left: 50%;
margin-left: -100px;
top: 25%;
width: 200px;
height: 100px;
font-weight: bold;
font-size: large;
}
</style>
</head>
<body>
<div id="loading"><img src="/loading.gif" alt="loading" /> Loading...</div>
<input type="button" onclick="xajax_loading_function();" value="Slow Function" />
</body>
</html>