Discussion :

[Xann_71]

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?

[jmulans]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
}

[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^^.

[jmulans]

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 ) qui disparait quand le readystate est egal a 4.
parce que les popup ça peut etre bloqué

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

[Xann_71]

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

[jmulans]

moi j'utilise un truc tout simple

Indicator noir

[hugo69]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

merci

[hugo69]

ok j'ai trouvé:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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();
	}

[jmulans]

met plutot 1
3 c'est trop court

[hugo69]

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

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

[jmulans]

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 )

[Xann_71]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[jmulans]

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

[Xann_71]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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