[AJAX] Mise à jour tr avec ajax

**zeclad01** · 06/09/2012, 08h21

Bonjour,

Petit problème avec ce bout de code (pas long).

Lorsqu'on clique sur l'image refresh.jpg de chaque ligne du tableau, on refresh la ligne en ajax.

Fonctionne sous chrome mais pas sous IE8, là est tout le problème.
IE8 bloque sur : document.getElementById(ip).innerHTML
Apparemment IE8 n'aime pas faire d'innerHTML sur un tr.

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 refresh(ip)
			{
				if (window.XMLHttpRequest)
				{// code for IE7+, Firefox, Chrome, Opera, Safari
					xmlhttp = new XMLHttpRequest();
				}
				else
				{// code for IE6, IE5
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange=function()
				{
					if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
					{
						document.getElementById(ip).innerHTML = xmlhttp.responseText;
					}
				}
				xmlhttp.open("GET","snmp.php?ip="+ip,true);
				xmlhttp.send();
			}

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
 
foreach($sondes as $sonde)
	{	
		$ip = $sonde;
 
		$uptime = @snmpget($sonde, "public", ".1.3.6.1.2.1.1.3.0", 1000);
		if ($uptime == false) {
			$uptime = "timeout";
		} else {
			$uptime = explode(': ', $uptime);
			$uptime = explode(') ', $uptime[1]);
			$uptime = $uptime[1];
		}
 
		$sysname = @snmpget($sonde, "public", ".1.3.6.1.2.1.1.5.0", 1000);
		if ($sysname == false) {
			$sysname = "timeout";
		} else {
			$sysname = explode(': ', $sysname);
			$sysname = explode('"', $sysname[1]);
			$sysname = $sysname[1];
		}
 
		$location = @snmpget($sonde, "public", ".1.3.6.1.2.1.1.6.0", 1000);
		if ($location == false) {
			$location = "timeout";
		} else {
			$location = explode(': ', $location);
			$location = explode('"', $location[1]);
			$location = $location[1];
		}
 
		$mac = @snmpget($sonde, "public", ".1.3.6.1.4.1.3854.1.2.2.1.3.0", 1000);
		if ($mac == false) {
			$mac = "timeout";
		} else {
			$mac = explode(': ', $mac);
			$mac = explode('"', $mac[1]);
			$mac = $mac[1];
		}
 
		$current = @snmpget($sonde, "public", ".1.3.6.1.4.1.3854.1.2.2.1.16.1.3.0", 1000);
		if ($current == false) {
			$current = "timeout";
		} else {
			$current = explode(': ', $current);
			$current = $current[1];
		}
 
		$criticalHigh = @snmpget($sonde, "public", ".1.3.6.1.4.1.3854.1.2.2.1.16.1.8.0", 1000);
		if ($criticalHigh == false) {
			$criticalHigh = "timeout";
		} else {
			$criticalHigh = explode(': ', $criticalHigh);
			$criticalHigh = $criticalHigh[1];
		}
 
		$warningHigh = @snmpget($sonde, "public", ".1.3.6.1.4.1.3854.1.2.2.1.16.1.7.0", 1000);
		if ($warningHigh == false) {
			$warningHigh = "timeout";
		} else {
			$warningHigh = explode(': ', $warningHigh);
			$warningHigh = $warningHigh[1];
		}
 
		$warningLow = @snmpget($sonde, "public", ".1.3.6.1.4.1.3854.1.2.2.1.16.1.9.0", 1000);
		if ($warningLow == false) {
			$warningLow = "timeout";
		} else {
			$warningLow = explode(': ', $warningLow);
			$warningLow = $warningLow[1];
		}
 
		$criticalLow = @snmpget($sonde, "public", ".1.3.6.1.4.1.3854.1.2.2.1.16.1.10.0", 1000);
		if ($criticalLow == false) {
			$criticalLow = "timeout";
		} else {
			$criticalLow = explode(': ', $criticalLow);
			$criticalLow = $criticalLow[1];
		}		
 
		if ($current >= $criticalHigh) {
			$color = "#EF4A4A";
		}
		else if (($current >= $warningHigh) AND ($current < $criticalHigh)) {		
			$color = "#FF9100";
		}
		else if (($current > $warningLow) AND ($current < $warningHigh)) {		
			$color = "#FFFFFF";
		}
		else if (($current <= $warningLow) AND ($current < $criticalLow)) {			
			$color = "#15A6DB";
		}
		else if ($current < $criticalLow) {		
			$color = "#006EFE";
		}
 
		if ($location == "timeout" OR $sysname == "timeout" OR $mac == "timeout" OR $current == "timeout" OR $criticalHigh == "timeout" OR $warningHigh == "timeout" OR $warningLow == "timeout" OR $criticalLow == "timeout" OR $uptime == "timeout")
		{
			$color = "#EF4A4A";
		}
 
		if (isset($_GET['ip']))
		{
			$donnees = '
					<td><img src="refresh.jpg" onclick="refresh(\''.$ip.'\');" /></td>
					<td style="background-color: '.$color.';">'.$location.'</td>
					<td style="background-color: '.$color.';">'.$sysname.'</td>
					<td style="background-color: '.$color.';">'.$ip.'</td>
					<td style="background-color: '.$color.';">'.$mac.'</td>
					<td style="background-color: '.$color.';">'.$current.' °C</td>
					<td style="border: 1px solid '.$color.';">'.$criticalHigh.' °C</td>
					<td style="border: 1px solid '.$color.';">'.$warningHigh.' °C</td>
					<td style="border: 1px solid '.$color.';">'.$warningLow.' °C</td>
					<td style="border: 1px solid '.$color.';">'.$criticalLow.' °C</td>
					<td style="border: 1px solid '.$color.';">'.$uptime.'</td>
					';
		} else {
			$donnees = $donnees.'
				<tr name="'.$ip.'" id="'.$ip.'">
					<td><img src="refresh.jpg" onclick="refresh(\''.$ip.'\');" /></td>
					<td style="background-color: '.$color.';">'.$location.'</td>
					<td style="background-color: '.$color.';">'.$sysname.'</td>
					<td style="background-color: '.$color.';">'.$ip.'</td>
					<td style="background-color: '.$color.';">'.$mac.'</td>
					<td style="background-color: '.$color.';">'.$current.' °C</td>
					<td style="border: 1px solid '.$color.';">'.$criticalHigh.' °C</td>
					<td style="border: 1px solid '.$color.';">'.$warningHigh.' °C</td>
					<td style="border: 1px solid '.$color.';">'.$warningLow.' °C</td>
					<td style="border: 1px solid '.$color.';">'.$criticalLow.' °C</td>
					<td style="border: 1px solid '.$color.';">'.$uptime.'</td>
				</tr>';
		}
	}
	echo $donnees;

Merci par avance.

**NoSmoking** · 06/09/2012, 20h29

Bonjour,
si tu écris dans une TR il te faut ne pas oublier les balises <TD></TD>, sinon IE n'aime pas cela...et il a raison.

Il te reste la possibilité d'écrire directement dans la TD.

**zeclad01** · 10/09/2012, 09h06

Envoyé par NoSmoking

Bonjour,
si tu écris dans une TR il te faut ne pas oublier les balises <TD></TD>, sinon IE n'aime pas cela...et il a raison.

J'ouvre et ferme bien mes TD voir ligne 106 à 117.

Envoyé par NoSmoking

Il te reste la possibilité d'écrire directement dans la TD.

Je ne peux pas écrire dans mes TD un par un puisque je renvoie le contenu de plusieurs TD (en ajax).

**zeclad01** · 10/09/2012, 14h31

Problème résolu.
Je vous propose de regarder le lien suivant : http://www.ideyatech.com/2009/07/sol...working-in-ie/

Sous IE, il y est indiqué que la propriété innerHTML est en lecture seule pour les balises suivantes :
COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR

SOLUTION :

Code :

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

1
2
3
4
5
6
7
8
<div id="divElement">  
<table>  
<tbody><tr id="trElement">  
<td>innerHTML not working in IE.</td>  
</tr>  
</tbody></table>  
<input type="button" value="Replace" onclick="javascript:updateInnerHTML('trElement', 'BOOM!', 'divElement')">  
</div>

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
<script type="text/javascript">  
   function updateInnerHTML(id, replacement, divId) {  
   var elem = document.getElementById(id);  
   var replaceDiv = document.getElementById(divId);  
   var tag = elem.nodeName;   // get nodeName of our element which is TR  
   var oldHTML = replaceDiv.innerHTML;  
   oldHTML = oldHTML.replace( /[\r\n\t]/g, '' );    // we have to remove spaces, carriage return , ..  
 
   // now we prepare the regex for finding the tr element to replace it's content  
   var re= new RegExp('<(\s*'+tag+'[^>]*id="?'+id+'"?[^>]*)>(.*?)(?:</table>  
 
   </'+tag+'[^>]*>|</'+tag+'[^>]*>)','i');  
 
   //we have to append tag to replacement since replace method will also replace the tag  
   replacement="<$1>" + replacement + "</" + tag +">";  
 
   newHTML= oldHTML.replace(re,replacement);  
   replaceDiv.innerHTML = newHTML;  
   }  
   </script>

**NoSmoking** · 10/09/2012, 18h59

La mémoire m'a fait défaut.

et je suis d'autant moins excusable que cela est indiqué en clair dans la documentation msdn.microsoft.com.

La solution fournie n'est néanmoins pas présente.

[AJAX] Mise à jour tr avec ajax

AJAX

Discussions similaires

Partager

Partager