[AJAX] Message d'attente pendant l'éxécution d'ajax

Bonjour,
Je voudrais créer un message d'attente pendant que mon code ajax s'exécute, après avoir cliqué sur un lien. Une sorte de message alert mais sans bouton et qui s'efface tout seul lorsque le chargement s'achève. J'avais pensé faire un window.open sur une page spéciale chargement avec une phrase pour faire patienté et une bar de chargement mais il dois exister une méthode plus simple non?

bah moi je met plutot un petit gif qui signifie un chargement
un alert je voit pas pas trop l'utilité :?

Code:

---

1 2 3 4 5 6 7

if ( xhr_object.readyState == 1 ){ // chargement en cours // j'affiche un gif qui tourne } if ( xhr_object.readyState == 4 ){ // j'affiche le resultat de la requete }

---

Oui justement je ne voulais pas afficher un alert puisque l'utilisateur n'a qu'a cliquer sur ok et le message disparait ce que je voulais c'est peu le même système que ton gif: tant readyState <4 => une fenêtre s'affiche avec une phrase du genre "veuillez patienter"
et a la fin du chargement : ready == 4 => la fenetre soit fermée.
C'est pourquoi j'avais pensé à créer une nouvelle page avec cette phrase et l'appelée avec window.open() au début du chargement puis la fermer avec window.close une fois le chargement achevé.

Mais je me demandais si il n'existait pas une fenêtre que l'on puisse appelée de cette manière. Mais les trois que je connaisse (alert, confirm et prompt) ne correspondent pas à ce que je cherche puisqu'elles se ferment toutes les 3 après l'activation de l'un de leur(s) bouton(s).

En passant, pour ton gif qui tourne, tu l'a trouvé quelque part ou tu l'a créé? Je suis pas super doué en dessin et encore moins quand il s'agit de les animés^^.

Citation:

---

Envoyé par Xann_71

Oui justement je ne voulais pas afficher un alert puisque l'utilisateur n'a qu'a cliquer sur ok et le message disparait ce que je voulais c'est peu le même système que ton gif: tant readyState <4 => une fenêtre s'affiche avec une phrase du genre "veuillez patienter"
et a la fin du chargement : ready == 4 => la fenetre soit fermée.
C'est pourquoi j'avais pensé à créer une nouvelle page avec cette phrase et l'appelée avec window.open() au début du chargement puis la fermer avec window.close une fois le chargement achevé.

Mais je me demandais si il n'existait pas une fenêtre que l'on puisse appelée de cette manière. Mais les trois que je connaisse (alert, confirm et prompt) ne correspondent pas à ce que je cherche puisqu'elles se ferment toutes les 3 après l'activation de l'un de leur(s) bouton(s).

En passant, pour ton gif qui tourne, tu l'a trouvé quelque part ou tu l'a créé? Je suis pas super doué en dessin et encore moins quand il s'agit de les animés^^.

---

Ce que tu peut faire, c'est pendant le chargement tu affiche une div au centre de ton ecran (avec marqué des trucs dedans :mrgreen:) qui disparait quand le readystate est egal a 4.
parce que les popup ça peut etre bloqué :P

pour le gif je l'ai trouvé ici, tu peut faire des trucs sympa :D

Ah ouai merci pour ton lien c'est parfait, faut juste que j'en trouve un qui aille bien avec les pages que j'ai fait. C'est pas pour moi c'est pour un regroupement d'organisation au niveau européen alors on va dire que ça doit imposer le respect un peu ^^, je vais pas pouvoir m'amuser à insérer des smilies par exemple, je pense que sa le ferai pas trop mdr.
La solution du div oui c'est pas mal. J'y avais pas pensé. Merci j'était en train de me compliquer la vie pour rien^^.

moi j'utilise un truc tout simple

http://www.ajaxload.info/cache/ff/ff.../00/00/2-1.gif Indicator noir :)

je trouve le site à logo de chargement très bien, mais tu ne nous donne pas le code que tu met pour le chargement.

Ca m'aiderait beaucoup.

Mon code de chargement de page est:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

function monmenu(cible, fichier){//Source, Cible, fichiers   var xhr = getXhr(); // On défini ce qu'on va faire quand on aura la réponse xhr.onreadystatechange = function(){   // On ne fait quelque chose que si on a tout reçu et que le serveur est ok if(xhr.readyState == 4 && xhr.status == 200){ mapage = xhr.responseText; // On se sert de innerHTML pour rajouter les options a la liste document.getElementById(cible).innerHTML = mapage; } }   // Ici on va voir comment faire du post xhr.open("POST",fichier,true); // ne pas oublier ça pour le post xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');   xhr.send(); }

---

On appel de cette facon:

Code:

---

<a href='javascript:monmenu("main_container","pages/main/mapage.php")'>Lien Ajax vers ma page</a>

---

merci

ok j'ai trouvé:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

function monmenu(cible, fichier){//Source, Cible, fichiers   var xhr = getXhr(); // On défini ce qu'on va faire quand on aura la réponse xhr.onreadystatechange = function() { //On attends le chargement if(xhr.readyState == 3) {   document.getElementById(cible).innerHTML = "<div align='center'><br><img src='assets/pict/loading.gif' width='16' height='16' /><br><br>chargement...</div>";   // On ne fait quelque chose que si on a tout reçu et que le serveur est ok }else if(xhr.readyState == 4 && xhr.status == 200){ mapage = xhr.responseText; // On se sert de innerHTML pour rajouter les options a la liste document.getElementById(cible).innerHTML = mapage; } }   // Ici on va voir comment faire du post xhr.open("POST",fichier,true); // ne pas oublier ça pour le post xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');   xhr.send(); }

---

met plutot 1
3 c'est trop court :)

tu es au top, c'est ce que je me disais.

La ca pete vraiment.

rastafari dude


[EDIT]: bizarre sur la page ou j'ai des requetes MySql il me fait une erreur javascript et ne s'arrete jamais de charger...

par contre pour le div, je suis obligé de le codé dans mon js ou je peux le mettre dans mon html et mettre un code qui me permette d'y faire appel juste au moment du chargement?

Citation:

---

Envoyé par Xann_71

par contre pour le div, je suis obligé de le codé dans mon js ou je peux le mettre dans mon html et mettre un code qui me permette d'y faire appel juste au moment du chargement?

---

met le dans ton html en caché, et fait le apparaitre au moment opportun (ouah comment j'utilise des mots classes 8-))

ouai c'est ce que j'ai commencé a faire:

Code:

---

1 2 3 4 5 6 7

<div id="loading"> <p> Chargement de la page...Veuillez patienter svp </p> <img src="loader.gif" /> </div>

---

Code:

---

1 2 3 4 5 6

#loading { text-align: center; display: none; }

---

et dans le js en fait je retrouve pas la ligne que je dois saisir, je sais i ça mais il dois y avoir une faute parce que sa ne marche pas:

Code:

---

1 2 3 4 5

if(xhr_object.readyState == 1) { document.getElementById('loading').style.display = block; }

---

D'ailleurs en y pensant, au lieu de ce code, vaudrais pas mieux mettre celui ci?

Code:

---

1 2 3 4 5

while(xhr_object.readyState < 4) { (la je remet pas parce que je pense que mon erreur est ici) }

---

laisse "== 1" c'est bien :)


sinon ta div il faut que tu la place au centre de la page, parce que là elel doit etre en bas (enfin à l'endrois ou tu l'a placée)

met là en position: absolute

Ok j'ai essayé comme ça
voila mon css:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

#loading { background-color: Green; width: 20em; height: 5em; border: solid 0.2em #000; margin-left: 13em; margin-top:15em; position: absolute; text-align: center; display: none; }

---

voici mon html:

Code:

---

1 2 3 4 5 6 7

<div id="loading"> <p> Chargement de la page...Veuillez patienter svp </p> <img src="loader.gif" /> </div>

---

et voici mon js

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

function loadpage(pagename) { var xhr_object = null; var fichier = pagename; if(window.XMLHttpRequest) // Firefox xhr_object = new XMLHttpRequest(); else if(window.ActiveXObject) // Internet Explorer xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); else // XMLHttpRequest non supporté par le navigateur { alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); return; } xhr_object.open("GET", pagename, false); xhr_object.send(null); if(xhr_object.readyState == 1) { document.getElementById('loading').style.display = "block"; } if(xhr_object.readyState == 4) { document.getElementById('maintext').innerHTML = xhr_object.responseText; } }

---

Si je fais un bouton qui appel la fonction suivante:

Code:

---

1 2 3 4 5

function test() { document.getElementById('loading').style.display = "block"; }

---

Lorsque je clic sur ce bouton, mon div de chargement apparait bien, mais si je clic sur le bouton qui fait appel a ma vraie fonction, il charge ma page comme prévu mais il ne fais pas apparaitre mon div le temps du chargement, je sais que je ne devrai pas le voir longtemps de toute façon puisque mon chargement est rapide mais je devrai avoir le temps de voir une forme apparaitre et disparaitre quand même non?
Alors que la même pas. C'est pourquoi je pense que ma fonction ne le fait tout simplement pas apparaitre, en plus si tu regarde bien mon code, on voit que je ne lui dit pas de disparaitre ensuite, donc il y a un hic. Mais je ne sais pas où?

Et si je met comme la partie

Code:

---

1 2	&& xhr.status == 200

---

Alors la sa ne me charge plus rien.
D'ailleurs dans tout les cas sa ne marche pas sous IE?? Y'a des truc qu'il va falloir m'expliquer:

Code:

---

1 2 3

if(window.ActiveXObject) // Internet Explorer xhr_object = new ActiveXObject("Microsoft.XMLHTTP");

---

cette partie est pas censé y faire fonctionner sous IE? A moins que j'ai un souci dans mes acolades