FR:Tutorials:Creating a Loading Message
FR:Tutorials:Creating a Loading Message
Un des éléments les plus simples mais les importants également de xajax est de fournir un message de 'Chargement...'. Il permet d'indiquer l'activité de xajax lors de l'appel au serveur. xajax fournit deux fonctions Javascript que vous pouvez contourner pour effectuer ça: xajax.loadingFunction() et xajax.doneLoadingFunction()
Dans ce tutorial, nous allons vous montrer comment créer un message de chargement qui va surprendre vos amis et impressioner vos ennemis. Préparez vous pour la bataille!
Au début nous allons commencer par créer une page xajax sipmle avec une fonction très lente à l'exécution.
<?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>
Maintenant nous avons la fonction lente et le bouton qui la correspond. Essayez de cliquer sur le bouton et remarquer combien c'est painible de ne pas avoir de retour sur ce qui se passe.
Maintenant nous allons créer une zone dans laquelle le message de chargement s'affichera, en utilisant un div:
<div id="loadingMessage" style="font-size: 22px; display: none;"> Chargement... </div>
Remarquer comment nous avons ajouté un "display: none;" dans Style. Celà permet de masquer le texte jusqu'au chargement de la fonction.
Ensuite, nous avons besoin de forcer le Javascript à afficher la div lors de l'excecution. Nous le faisons ainsi:
<script type="text/javascript">
<!--
xajax.loadingFunction =
function(){xajax.$('loadingMessage').style.display='block';};
// --></script>
Donc voici comment est le code html
<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>
Essayez d'appuyer sur le bouton pour voir ce qui se passera. Voilà, vous voyez le message 'chargement...' apparaître. Mais il ne part pas. Donc de nouveau, nous allons contourner une des fonctions de xajax pour cacher quand l'exécution sera terminer.
Pour changer un peu nous allons faire les choses autrement pour la fin de l'exécution:
<!--
function hideLoadingMessage()
{
xajax.$('loadingMessage').style.display = 'none';
}
xajax.doneLoadingFunction = hideLoadingMessage;
// --></script>
Jusqu'à maintenant nous avons créé une fonction pour afficher le message de chargement et pour le masquer. Si vous appuyez sur le bouton, tout se passera comme prévu. Bravo, vous venez juste de créer un message de chargement :)
Pour info, voici la version finale:
<?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>
