[AJAX] Raffraichissement d'une div avec ajax

Version imprimable

EDIT : Le code non bugger et qui fonctionne est donné ici ici.

Bonjour,

Je souhaiterai rafraichir une div à l'aide d'AJAX, le problème est que mon script ne fonctionne pas le voici :

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
28
29
30
31
32
33
34
echo '<head> <script type="text/javascript">
 
		var xhr;
		if (window.XMLHttpRequest)                 //  Objet de la fenêtre courant
			{ 
				xhr = new XMLHttpRequest();     //  Firefox, Safari, ...
			} 
		else 
		   if (window.ActiveXObject)                    //  Version Active
		   {
			  xhr = new ActiveXObject("Microsoft.XMLHTTP");   // Internet Explorer 
		   }
 
 
function refresh(delay,test,url)
 
{
	loadHtm(test,url);
	timer = setTimeout("refresh()",delay);
}
 
function loadHtm(test,url) 
{
	var XHR = new XHRConnection();
	XHR.setRefreshArea(test);
	XHR.sendAndLoad(url, "POST");
	return true;
}
</script>
</head>';
echo'<body onload="refresh(1,test,page_acceuil_eleve.php)"> 
	<div id="test">';
            add();
echo'</div></body>';

La fonction php add permet d'incrément une variable puis de l'afficher ... Je n'arrive pas à voir l'erreur dans ce script.

Merci d'avance pour votre aide.

16/06/2009, 12h18
E.Bzz
Bonjour et bienvenue sur Developpez.com ;)

2 remarques préalables :
1. Merci de poster le code généré au lieu du code PHP : il sera plus facile de t'aider.
2. Pourquoi faire un appel Ajax sur le onload du <body> ? :?
Génère directement le contenu correct pour ton div lors de la génération de la page ...

A+
16/06/2009, 12h24
Bovino
Citation:

Envoyé par crazymonkey

La fonction php add permet d'incrément une variable puis de l'afficher ... Je n'arrive pas à voir l'erreur dans ce script.

Merci d'avance pour votre aide.
Code:

1 2 3 4 5 6 function refresh(delay,test,url) { loadHtm(test,url); timer = setTimeout("refresh()",delay); }
Dans le setTimeout, tu ne passes pas d'arguments à ta fonction :roll:
16/06/2009, 12h27
E.Bzz

Arf !
Pas vu le setTimeout() :aie:

Ça répond à ma 2° question ...

Par contre, un setInterval() serait plus logique, du coup ...

A+

Merci de ta réponse =), je reposte avec le code généré =)
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 28 29 30 31 <script type="text/javascript"> var xhr; if (window.XMLHttpRequest) // Objet de la fenêtre courant { xhr = new XMLHttpRequest(); // Firefox, Safari, ... } else if (window.ActiveXObject) // Version Active { xhr = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer } function refresh(delay,test,url) { loadHtm(test,url); timer = setTimeout("refresh()",delay); } function loadHtm(test,url) { var XHR = new XHRConnection(); XHR.setRefreshArea(test); XHR.sendAndLoad(url, "POST"); return true; } </script> <body> <div id="test" onload="refresh(1000,test,page_acceuil_eleve.php)">2</div> </body>
Hum en mettant sur onload du body il va s'exécuter la fonction au chargement du corps de la page ...? Et question bête (mais je débute je suis perdu et je n'ai trouvé aucun cours ou tuto sur le net), je peux mettre le onload directement sur la div ? Mais dans les deux cas cela reviens au même non ? Puisque j'appelle ma fonction refresh en passant la div à rafraichir ... Ouh je suis vraiment perdue la :oops:

16/06/2009, 12h32
E.Bzz

Citation:

Envoyé par crazymonkey

Ouh je suis vraiment perdue la :oops:

Voir les autres réponses postées depuis ;)

A+

Citation:
Envoyé par Bovino
Code:

1 2 3 4 5 6 function refresh(delay,test,url) { loadHtm(test,url); timer = setTimeout("refresh()",delay); }
Dans le setTimeout, tu ne passes pas d'arguments à ta fonction :roll:
Ah oui bien vu j'ai corrigé ça par :
Code:

1 2 3 4 5 6 7 function refresh(delay,test,url) { loadHtm(test,url); timer = setTimeout("refresh(1000,test,page_acceuil_eleve.php)",delay); }
Mais ça ne fonctionne toujours pas :(

16/06/2009, 12h38
Bovino

Citation:

Envoyé par crazymonkey

Et question bête (mais je débute je suis perdu et je n'ai trouvé aucun cours ou tuto sur le net), je peux mettre le onload directement sur la div ?

Non, ça tu ne peux pas ! Le onload s'applique à la balise body et aux éléments remplacés (img, object, iframe...)
16/06/2009, 12h41
E.Bzz

Code:

timer = setTimeout("refresh(1000,test,page_acceuil_eleve.php)",delay);

Pas bon, là : ta variable test n'est pas interprétée :aie:

Code:

timer = setTimeout("refresh(1000,'"+test+"','page_acceuil_eleve.php')",delay);

EDIT : et les quottes autour des 2 derniers paramètres ...

A+
16/06/2009, 14h06
crazymonkey

Citation:

Envoyé par E.Bzz

Code:

timer = setTimeout("refresh(1000,test,page_acceuil_eleve.php)",delay);

Pas bon, là : ta variable test n'est pas interprétée :aie:

Code:

timer = setTimeout("refresh(1000,'"+test+"','page_acceuil_eleve.php')",delay);

EDIT : et les quottes autour des 2 derniers paramètres ...

A+

Citation:

Envoyé par Bovino

Non, ça tu ne peux pas ! Le onload s'applique à la balise body et aux éléments remplacés (img, object, iframe...)

Merci à tous les deux,
J'ai donc appliqué les quottes sur les 2 derniers paramètres :

Code:

timer = setTimeout("refresh('1000','"+lol+"','page_acceuil_eleve.php')",delay);

Mais j'ai l'impression que les fonctions ne sont pas appelées je m'explique :

J'ai écris un document.write("Passage par refresh"); et document.write("Passage par loadhtm"); dans leur fonction respective refresh et loadhtm. Alors soit je m'y prends mal soit les fonctions ne sont pas appelées.

Et j'ai pourtant bien remis le onload sur la balise body ...

Merci d'avance pour votre aide.
16/06/2009, 14h10
Bovino

N'oublie pas que si tu as mis cette partie :

Code:

timer = setTimeout("refresh('1000','"+lol+"','page_acceuil_eleve.php')",delay);

dans un echo PHP, il faut échapper les quotes !

Code:

echo 'timer = setTimeout("refresh(\'1000\',\'"+lol+"\',\'page_acceuil_eleve.php\')",delay);';
16/06/2009, 14h14
crazymonkey

Citation:

Envoyé par Bovino

N'oublie pas que si tu as mis cette partie :

Code:

timer = setTimeout("refresh('1000','"+lol+"','page_acceuil_eleve.php')",delay);

dans un echo PHP, il faut échapper les quotes !

Code:

echo 'timer = setTimeout("refresh(\'1000\',\'"+lol+"\',\'page_acceuil_eleve.php\')",delay);';

Oui oui je l'ai fais j'ai oublié de le préciser désolé ... :oops:

Mais toujours le même problème j'ai l'impression que mes fonctions ne sont pas appelées ...

Alors maintenant les fonctions JS sont appelés mais la fonction PHP ne l'est plus :D ...

J'ai du echapé les caractères de mon unload ...

RE Edit toutes les fonctions sont normalement appelées mais la div n'actualise pas ...

Mon code ressemble à ça maintenant :

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
28
29
30
31
<script type="text/javascript">
 
		var xhr;
		if (window.XMLHttpRequest)                 //  Objet de la fenêtre courant
			{ 
				xhr = new XMLHttpRequest();     //  Firefox, Safari, ...
			} 
		else 
		   if (window.ActiveXObject)                    //  Version Active
		   {
			  xhr = new ActiveXObject("Microsoft.XMLHTTP");   // Internet Explorer 
		   }
 
function refresh(delay,test,url)
{
	loadHtm(test,url);
	timer = setTimeout("refresh(\'100\',\'"+test+"\',\'page_acceuil_eleve.php\')",delay);
 
}
 
function loadHtm(test,url) 
{
	var XHR = new XHRConnection();
	XHR.setRefreshArea(test);
	XHR.sendAndLoad(url, "POST");
	return true;
}
</script>
</head><body onload="refresh(\'100\',\'test\',\'page_acceuil_eleve.php\')">
	<div id="test">add(); <br />3</div>
</body>

Bonjour à tous,

J'ai réalisé de grand progrès sur ma requête la div s'actualise mais elle écrase son contenu et n'écrit pas le nouveau ...

Voici le nouveau code :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
<head>
<title>Test</title>
<script text="javascript">
 
function timer()
{
comp=(setTimeout("go()",5000));
}
 
function getXhr(){
                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr
			}
 
function go()
{
	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)
					{
 
						var reponseserveur = '';
						html = xhr.responseText;
						document.getElementById('cible').innerHTML = reponseserveur;
					}
		}
	xhr.open("GET","toto.php",true);
	xhr.send(null);
	setTimeout('go()',5000);
}
</script>	
</head>
 
<body onload='timer()'>
	<div id="cible">
zeze
	</div>
</body>
</html>

Et voila ce que contient la page toto.php

Code:

<?php echo time(); ?>

Merci d'avance pour l'aide que vous pourrez m'apporter =)

Code:

1 2 3 var reponseserveur = ''; html = xhr.responseText; document.getElementById('cible').innerHTML = reponseserveur;
:calim2:
Vu que tu crées une variable vide (:?) pour l'afficher dans ta div, c'est normal que rien ne s'affiche...
Code:

1 2 var html = xhr.responseText; document.getElementById('cible').innerHTML = html;

17/06/2009, 15h35
E.Bzz
Citation:

Envoyé par crazymonkey

la div s'actualise mais elle écrase son contenu et n'écrit pas le nouveau ...

Si si !

Encore faut-il que "le nouveau" soit un peu plus judicieusement déterminé :aie:
Code:

1 2 3 4 5 6 if(xhr.readyState == 4 && xhr.status == 200) { var reponseserveur = ''; html = xhr.responseText; document.getElementById('cible').innerHTML = reponseserveur; }
Sinon, pour ajouter au lieu de remplacer, c'est

Code:

document.getElementById('cible').innerHTML +=

A+

Oh la je me sens très c*n merci beaucoup ^^ Ça fonctionne maintenant je mets le code pour tout ceux qui aurait besoin de réaliser ce petit truc.

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<html>
<head>
<title>Test</title>
<script text="javascript">
 
function timer()
{
comp=(setTimeout("go()",5000));
}
 
function getXhr(){
                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr
			}
 
function go()
{
	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)
					{
 
						var html = xhr.responseText;
						document.getElementById('cible').innerHTML = html;
 
					}
		}
	xhr.open("GET","essai.php",true);
	xhr.send(null);
	setTimeout('go()',5000);
}
</script>	
</head>
 
<body onload='timer()'>
	<div id="cible">
		<?php echo date('l jS \of F Y h:i:s A'); ?>	</div>
</body>
</html>

Créer un fichier essai.php avec comme code :

Code:

<?php echo date('l jS \of F Y h:i:s A'); ?>

Et voila merci pour votre aide =)