Tutorials:Creating a Loading Message






Tutorials:Creating a Loading Message

[edit] Version 0.5

In version 0.5, the loading message is done through the use of callback functions


After printJavascript 

<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>

In HTML somewhere 

<div id="loading"><img src="images/loading.gif" alt="" /> Loading...</div>

in CSS somewhere 

#loading {
    background: white;
    padding: 20px;
    border: 2px solid green;
    display: none; /* hidden */
    position: absolute;    
    left: 50%;
    margin-left: -100px;
    top: 25%;
    width: 200px;
    /*height: 100px;*/
        /*margin-top: -50;*/
    font-weight: bold;
    font-size: large;
    }

[edit] Version 0.2

One of the most simple but important parts of xajax is providing a 'Loading...' message as visual feedback for when xajax is doing a server call. xajax provides two Javascript functions that you can override to do this: xajax.loadingFunction() and xajax.doneLoadingFunction()

In this tutorial, we'll show you how to create a loading message to 'wow' your friends and impress your enemies. Prepare for battle!

First we'll set up a simple xajax page that has a really slow function in it. 

<?php
require("xajax.inc.php");

function slow_function()
{
    $objResponse = new xajaxResponse();
    sleep(2); //we'll do nothing for two seconds
    $objResponse->addAlert("All done");
    return $objResponse;
}

$xajax = new xajax();
$xajax->registerFunction('slow_function');
$xajax->processRequests();
?><html>
    <head>
        <title>Loading Bar Demo</title>
        <? $xajax->printJavascript(); ?>
    </head>
    <body>
        <input type="button" onclick="xajax_slow_function();" value="Slow Function" />
    </body>
</html>

So now we've got the slow function and corresponding button, try clicking the button and see how painful it is that there's no feedback. Sucks don't it?

So now comes the juicy bit. First we'll make an area that the loading message will go into, using a
: 
<div id="loadingMessage" style="font-size: 22px; display: none;">
    Loading...
</div>

Notice how we have "display: none;" in the style of the div? That's because we don't want to show that we're loading a function until we really are loading a function.

Next, we need to make the Javascript to show the loading div when we are processing. We do so like: 

<script type="text/javascript">
<!--
    xajax.loadingFunction =
        function(){xajax.$('loadingMessage').style.display='block';};
// --></script>

So now our html code looks like 

<html>
    <head>
        <title>Loading Bar Demo</title>
        <? $xajax->printJavascript(); ?>
    </head>
    <body>
        <script type="text/javascript">
        <!--
            xajax.loadingFunction =
                function(){xajax.$('loadingMessage').style.display='block';};
        // --></script>
        <input type="button" onclick="xajax_slow_function();" value="Slow Function" />
        <div id="loadingMessage" style="font-size: 22px; display: none;">
            Loading...
        </div>
    </body>
</html>

Try clicking on the button and see what happens. That's right, we get to see the 'Loading...' message appear. But it doesn't go away yet. So again, we'll override one of xajax's functions to hide the loading message when we're done.

Just for varieties sake, we'll do things different for when we're done loading: 

<script type="text/javascript">
<!--
    function hideLoadingMessage()
    {
        xajax.$('loadingMessage').style.display = 'none';
    }
    xajax.doneLoadingFunction = hideLoadingMessage;
// --></script>

So now we have created a function to show the loading message, and hide the loading message. Try clicking on the button, and all going well, you should see the loading message, then after two seconds, it should disappear. Well done, you've just created a loading message :)


For reference the final page looks like: 

<?php
require("xajax.inc.php");

function slow_function()
{
    $objResponse = new xajaxResponse();
    sleep(2); //we'll do nothing for two seconds
    $objResponse->addAlert("All done");
    return $objResponse;
}

$xajax = new xajax();
$xajax->registerFunction('slow_function');
$xajax->processRequests();
?><html>
    <head>
        <title>Loading Bar Demo</title>
        <? $xajax->printJavascript(); ?>
    </head>
    <body>
        <script type="text/javascript">
        <!--
            xajax.loadingFunction = 
                function(){xajax.$('loadingMessage').style.display='block';};
            function hideLoadingMessage()
            {
                xajax.$('loadingMessage').style.display = 'none';
            }
            xajax.doneLoadingFunction = hideLoadingMessage;
        // --></script>
        <input type="button" onclick="xajax_slow_function();" value="Slow Function" />
        <div id="loadingMessage" style="font-size: 22px; display: none;">
            Loading...
        </div>
    </body>
</html>
Retrieved from "http://xajaxproject.org/wiki/Tutorials:Creating_a_Loading_Message"