[AJAX] Raffraichissement d'une div avec ajax

**crazymonkey** · 16/06/2009, 12h49

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 :

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

**E.Bzz** · 16/06/2009, 13h18

Bonjour et bienvenue sur Developpez.com

2 remarques préalables :

Merci de poster le code généré au lieu du code PHP : il sera plus facile de t'aider.
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+

**Bovino** · 16/06/2009, 13h24

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 :

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

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

**E.Bzz** · 16/06/2009, 13h27

Arf !
Pas vu le setTimeout()

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

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

A+

**crazymonkey** · 16/06/2009, 13h30

Merci de ta réponse =), je reposte avec le code généré =)

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

**E.Bzz** · 16/06/2009, 13h32

Envoyé par crazymonkey

Ouh je suis vraiment perdue la

Voir les autres réponses postées depuis

A+

**crazymonkey** · 16/06/2009, 13h37

Envoyé par Bovino

Code :

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

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

Ah oui bien vu j'ai corrigé ça par :

Code :

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

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

**Bovino** · 16/06/2009, 13h38

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

**E.Bzz** · 16/06/2009, 13h41

Code :

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

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

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

Code :

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

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

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

A+

**crazymonkey** · 16/06/2009, 15h06

Envoyé par E.Bzz

Code :

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

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

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

Code :

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

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

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

A+

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 :

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

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.

**Bovino** · 16/06/2009, 15h10

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

Code :

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

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

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

Code php :

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

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

**crazymonkey** · 16/06/2009, 15h14

Envoyé par Bovino

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

Code :

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

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

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

Code php :

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

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

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

**crazymonkey** · 16/06/2009, 16h45

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

...

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 :

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

**crazymonkey** · 17/06/2009, 16h11

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 :

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

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

<?php echo time(); ?>

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

**Bovino** · 17/06/2009, 16h32

Code :

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

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

Vu que tu crées une variable vide (

) pour l'afficher dans ta div, c'est normal que rien ne s'affiche...

Code :

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

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

**E.Bzz** · 17/06/2009, 16h35

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é

Code :

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

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 :

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

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

A+

**crazymonkey** · 17/06/2009, 16h41

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 :

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

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

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

Et voila merci pour votre aide =)

[AJAX] Raffraichissement d'une div avec ajax

AJAX

Discussions similaires

Partager

Partager