[AJAX] refresh d'un Div

**snowpy** · 12/04/2010, 09h55

Bonjour à tous

j'ai un petit souci pour réaliser un refresh d'un div. J'ai plusieur Div dans ma page. J'utilise donc un objet XMLHttpRequest pour réaliser un refresh.

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
function getXMLHTTP()
{
    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)
         {
                try
                {
                       xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e1)
                {
                     xhr = null;
                }
         }
     }
     else
        alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
   return xhr;
}

la je viens de créer l'objet pas de souci la dessus.

Code :

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

1
2
3
4
5
6
7
function rafraichir()
{      
  getDiv1('pied_de_page', 'index.php');
  setTimeout("rafraichir()", 1000);
 
}
window.onload = function() { rafraichir();}

la je rafraichi pas de souci non plus ca fonctionne.

(débutant en java script) je récupers donc xhr.responseText que je m'enpresse de coler dans mon div "mondiv1.innerHTML=xhr.responseText" et la à ma surprise c'est ma page entière qui ressurgit dans le div. Je voudrais rafraichir que mon div concerné et non recollé ma page entière dans le Div.

Je sais qu'il existe xhr.responseXML, mais quand je l'affiche dans un alert (pour voir la tête du xml vu que je ne sais pas comment s'appelle mon noeud dans ma page) il m'affiche null. Est ce qu'il faut que je le parse ? xhr.responseXML contient t'il réellement ma page (code source) dans un xml ?

Si quelqu'un à des réponses je suis preneur

merci.

Snowpy

**DoubleU** · 12/04/2010, 10h05

Fais voir la fonction getDiv1 ?

**snowpy** · 12/04/2010, 10h08

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
function getDiv1(MyDiv, MyUrl) { 
 
var xmlhttp1 = null;  
 
   var mondiv1 = document.getElementById(MyDiv); 
 
   if (!mondiv1) { 
        return 1; 
     } 
 
    if (xmlhttp1 && xmlhttp1.readyState != 0) { 
        xmlhttp1.abort(); 
   } 
 
   xmlhttp1 = getXMLHTTP(); 
 
    if (xmlhttp1) { 
 
      xmlhttp1.open("GET", MyUrl, true);  
 
        /* on définit ce qui doit se passer quand la page répondra */ 
 
         xmlhttp1.onreadystatechange = function() { 
 
            if (xmlhttp1.readyState == 4 && xmlhttp1.responseText != '') /* 4 : état "complete" */ { 
 
 
 
 
         //mondiv1.innerHTML = xmlhttp1.responseText; 
 
            }
      } 
 
         xmlhttp1.send(null); 
     } 
}

**andry.aime** · 12/04/2010, 10h18

Bonjour,

var xmlhttp1 = null;

var mondiv1 = document.getElementById(MyDiv);

if (!mondiv1) {
return 1;
}

if (xmlhttp1 && xmlhttp1.readyState != 0) {

xmlhttp1 est toujours null à l'entré du if donc test inutile.
Pour la fonction rafraichir, je te conseille de ne pas utiliser une fonction récursive mais un setInterval.
Montres nous ton code HTML.

**snowpy** · 12/04/2010, 10h23

En parcourant le forum j'ai vue que tu conseillais le set interval et pas le récursif ^^

hum c'est vrai que le test ne sert à rien, je corrige ca.

le code html complet (la page) ou juste le div concerné ?

je mets la page comme ca t'auras tout ^^

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
 
<?php
session_start() ;
if(isset($_POST['IPMUX']) and isset($_POST['IPTOTO']) and isset($_POST['IPENC']))
{
        $_SESSION['IP_MUX']=(string)$_POST['IPMUX']; 
        $_SESSION['IP_TOTO']=(string)$_POST['IPTOTO'];
        $_SESSION['IP_ENC']=(string)$_POST['IPENC'];
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>toto</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="design.css" />
		</?php $delay=10;
		$url='http://127.0.0.1/index.php';
		header("Refresh: $delay;url=$url");
		?>
		<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
 
    </head>
    <body>
		<div id ="logo">
		</div>
		<div id="en_tete">
			<p> l'entête c'est par iciiiii</p>
		</div>
 
 
				<ul id="nav">
				   <li><a href="Encodeur.php">Encodeur</a></li>
				   <li><a href="toto.php">toto</a></li>
				   <li><a href="Multiplexage.php">Multiplexage</a></li>
				</ul>
		<div id="fonctionnement">
		<p> fonctionnement de l'encodeur :
		<image id="led" src ="images/led_rouge.jpg" alt="led_rouge"/>
		<br/>
		adresse ip de l'encodeur : <?php echo $_SESSION['IP_TAND'];?>
		</p>
 
		<p> fonctionnement de toto:
		<image id="led" src ="images/led_verte.jpg" alt="led_rouge"/>
		<br/>
		adresse ip de toto: <?php echo $_SESSION['IP_XMX'];?>
		</p>
 
		<p> fonctionnement du multiplexeur :
		<image id="led" src ="images/led_rouge.jpg" alt="led_rouge"/>
		<br/>
		adresse ip du MUX : <?php echo $_SESSION['IP_MUX'];?>
		</p>
		</div>
 
			<div id="corps">
	   <p> texte
	   </p>
			</div>
	 <script type="text/javascript"> 
 
 
// Fonction pour Ajax
 
function getXMLHTTP()
{
    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)
         {
                try
                {
                       xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e1)
                {
                     xhr = null;
                }
         }
     }
     else
        alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
   return xhr;
}
 
// Div refresh.
 
function getDiv1(MyDiv, MyUrl) { 
 
var xmlhttp1 = null;  
 
   var mondiv1 = document.getElementById(MyDiv); 
 
   if (!mondiv1) { 
        return 1; 
     } 
 
    if (xmlhttp1.readyState != 0) { 
        xmlhttp1.abort(); 
   } 
 
   xmlhttp1 = getXMLHTTP(); 
 
    if (xmlhttp1) { 
 
      xmlhttp1.open("GET", MyUrl, true);  
 
        /* on définit ce qui doit se passer quand la page répondra */ 
 
         xmlhttp1.onreadystatechange = function() { 
 
            if (xmlhttp1.readyState == 4 && xmlhttp1.responseText != '') /* 4 : état "complete" */ { 
 
 
		  alert(xmlhttp1.responseText);
 
 
 
            }
      } 
 
         xmlhttp1.send(null); 
     } 
}
 
 
window.onload = function() { setInterval("getDiv1('pied_de_page', 'index.php');", 1000);}
 
 
</script>
 
			<div id="pied_de_page">
 
	<?php   echo date("H:i:s T");
        ?>	   
 
 
			</div>
 
    </body>
</html>

la je refresh que le pied mais à terme j'en aurais d'autre à refresh c'est pas juste pour avoir l'heure.

**andry.aime** · 12/04/2010, 11h12

Re,

1-Balise <img/> mais pas <image/>.
2-Tu as l'id led se répète plusieurs fois dans le document, un id doit être unique.
3-

à ma surprise c'est ma page entière qui ressurgit dans le div.

getDiv1('pied_de_page', 'index.php');

C'est la page index.php que tu mets dans le div

.

**snowpy** · 12/04/2010, 11h20

arf le copier coller s'est pas bien du coup j'ai trois led avec un seul id je corrige ca de suite ^^

C'est la page index.php que tu mets dans le div

ouiai c'est pour ca que j'ai essayé de passer par le xml. Mais je voudrais refresh que cette partie (le div de l'heure) et pas toute la page donc je peux pas passer par le xmlhttp1.responseText. Donc la question c'est que renvoie le xmlhttp1.responseXML, ma page entière dans un xml ? Si oui me suffit d'aller chercher le noeud qu'il me faut pour l'afficher dans mon div.

**snowpy** · 12/04/2010, 16h46

humm une solution consiste à coder le contenu de la div dans une page et de refresh sur cette page on aura donc que le contenu de la div qui sera bien refresh mais petite question c'est normal si j'ai des é par exemple dans ma Div au refresh il arrive pas à les interpréter je me retrouve avec losange et un point d'interrogation au milieu quelqu'un aurait il une suggestion pour qu'il prenne bien en compte mes caractères spéciaux ?

**snowpy** · 13/04/2010, 11h28

il semblerait qu'il faille encoder en utf8 mais je ne sais pas trop ou l'incorporer

Code :

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

xmlhttp1.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

dans la theorie après avoir récu ma nouvelle page mais ca ne fonctionne pas

ma nouvelle page ressemble à ca :

Code :

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

1
2
3
4
5
6
   
	   
	<?php
                        echo "<p> © toto prod</p>";
		echo date("H:i:s T");
	?>

edit : problème résolu correction en rouge.

[AJAX] refresh d'un Div

AJAX

Discussions similaires

Partager

Partager