11548 sujets

JavaScript, DOM et API Web HTML5

Afficher un indicateur de chargement pendant l'exécution des requêtes

Bonjour, je recherche un script jquery qui ferrais :
Afficher un indicateur de chargement pendant l'exécution des requêtes Ajax,
pensez vous qu'on peut trouver sa, svp?

ou sinon comment adapter ce code en jquery?
page html:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>AJAX : Exemple de client</title>
    <script type="text/javascript" src="prototype-1.5.1_rc2.js"></script>
    <script type="text/javascript" src="test4.js"></script>
</head>
<body>
 
    <p>
        <a href="" onclick="gestionClic(); return false;">
            Cliquez ici !
        </a>
    </p>
 
    <div id="resultat">&nbsp;</div>
 
</body>
</html>



<?php
echo (hello world);
?>





function gestionClic()
{
    var monForm = $('monForm');
    var champ_date_debut = monForm.date_debut.value;
   
 

    var myAjax = new Ajax.Request(
        './traitement.php',
        {
            method: 'post',
            postBody: 'date_debut='+champ_date_debut,
            onComplete: function (originalRequest)
            {
           
            },
            onSuccess: function (xhr)
            {
                $('resultat').innerHTML = xhr.responseText;
            }


        }
        );
} // gestionClic()

var myGlobalHandlers = {
    onCreate: function()
    {
        if (!$('chargement'))
        {
            creationIndicateur();
        }
        Element.show('chargement');
    },
    onComplete: function()
    {
        if(Ajax.activeRequestCount == 0){
            Element.hide('chargement');
        }
    }
};
Ajax.Responders.register(myGlobalHandlers);


// En incluant un bloc HTML directement dans le document :
function creationIndicateur()
{
    new Insertion.Top(document.body, '<div id="chargement" style="display: none;position: fixed;bottom: 0;padding: 0;height: 20px;margin: 0;width: 100%;background-color: #FFFF99;display: block;text-align: center;font-weight: bold;font-size: 1.3em;font-family: Verdana, Arial, Helvetica, sans-serif;padding-top: 5px;"><img src="images/ajax_indicator.gif"  align="absmiddle">&nbsp;Chargement... <br /><br /><br /></div>');
}

qu'en pensez vous svp?
Modifié par Mika2008 (01 Aug 2009 - 00:16)
hello je pense y étre presque mais y a un truc qui marche, pas
l'affichage du résultat ce duplique je ne sais pas pourquoi?
et ma barre de chargement disparait la premiére et puis au bout du deuximé coup elle ne veut plus partir, quelqu'un peut m'aider svp?

voila le code complet :
index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>AJAX : Exemple de client</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/exemple.js"></script>
    </head>
    <body>

        <p>
            <form  method="post"  id="monForm">
                <div class="gauche"><fieldset>
                        <legend>Nouvelle catégorie : </legend>

                        <!-- Choix de la période  -->
                        <p><span class="label"><label for="compte">Compte:</label></span><span class="controle"><input type="text" class="text" id="compte"value="Alsa" />
                            </span></p>
                        <p><span class="label"><label for="intitule">Intitulé :</label></span><span class="controle"><input type="text" class="text" value="test" id="creation" /></span>
                        </p>

                        <!-- Envoie -->
                        <p class="submit">
                            <input type="hidden" id="type" value="cat" />
                            <input  type="submit" value="Envoyer" id="envoi"onclick="gestionClic();return false;" />

                        </p>

                    </fieldset>




            </form>
    
        </p>
        </div><!-- .droite -->
        <div id="resultat">&nbsp;</div>

    </body>
</html>


exemple.js (les requetes jquery)




function gestionClic()
{

   $("#resultat").empty();
    var champ_compte = $("#compte").val();
    var champ_intitule = $("#intitule").val();

    $.ajax({
        type: "POST",
        url: "serveur1.php",
        data: 'compte='+champ_compte+'&intitule='+champ_intitule,
        success: function(retour){
         
            $("#resultat").append(retour);
        }
    });


    $(document.body).ajaxSend(function(request, settings){
        $(this).append('<div id="chargement" style="display: none;position: fixed;bottom: 0;padding: 0;height: 20px;margin: 0;width: 100%;background-color: #FFFF99;display: block;text-align: center;font-weight: bold;font-size: 1.3em;font-family: Verdana, Arial, Helvetica, sans-serif;padding-top: 5px;"><img src="images/ajax_indicator.gif"  align="absmiddle">&nbsp;Chargement... <br /><br /><br /></div>');
    });


    $("#chargement").ajaxComplete(function(request, settings){
        $(this).remove();
    });



}



etle traittement php, qui nous permet de voirla barre de chargement :

server.php
<?php

sleep(3);
echo 'hello world'.' ; '.$_REQUEST['compte']. ' ; '.$_REQUEST['intitule'];
?>


qu'en pensez vous svp?
Modifié par Mika2008 (23 Aug 2009 - 13:28)
Bonjour,

Pourquoi écouter l'évènement ajaxSend sur body, et l'évènement ajaxComplete sur #chargement?

Par ailleurs, #chargement est en display:none d'après le code que tu indiques, et je n'ai pas vu de code destiné à rendre cet élément visible; donc théoriquement il ne devrait JAMAIS s'afficher. Smiley ohwell

Note pour finir: mieux vaut mettre le moins possible de mise en forme dans le code généré en JavaScript. Théoriquement, un <div id="chargement">Chargement en cours&hellip;</div> devrait être suffisant, le reste étant géré côté CSS.
merci de ta réponse !
ajaxsend écoute sur body,car il doit y inserer un nouvelle élement qui est mon div de chargement et disparaitre aprés. et sa fonctionne.
en fais j'ai fais comme sa, pour que sa soit du dévellopement non obstructif.
mais en fais ce code ne marche pas à 100 % Smiley ohwell
je découvre jquery .
par contre mon code en prototype marche parfaitement !
mais comme je veux utiliser des scripts pour jquery j'ai des conflit entre code :'(
Salut Mika2008

Avec jQuery c'est extrêmement simple.
Je reprends ta requête:
$.ajaxSetup({
    beforeSend: function() {
        $("#chargement").show();
    },
    complete: function() {
        $("#chargement").hide();
    }
});

function gestionClic() {
    // ...

    $.post("serveur1.php", {
        compte: $("#compte").val(),
        intitule: $("#intitule").val()
    }, function(retour) {
        $("#resultat").html(retour); // html() remplace tout le contenu
    });

    // ...
}
Bien sur, #chargement est déjà présent dans la page, en display: none; et avec les styles qui vont bien. Ce qui a pour effet d'obtenir une bonne séparation de la vue et du contrôleur.

[Edit] Désolé mais ÇA me pique les yeux quand je vois qu'on écrit SA plutôt que ÇA
Modifié par Ze Nenex (11 Aug 2009 - 11:03)
Sujet clos
Aller à