Erreur Objet Requis sur IE uniquement

Version imprimable

Je réalise un site de galerie photo avec une base de donnée mysql et un XML crée à la volée en php qui est ensuite appelé en ajax , mon code marche partout nickel sauf sur IE
voila le bout de code ou l'erreur se produit : Objet Requis

Code:

1
2
var artwork = docXml.getElementsByTagName('artwork');
	document.getElementById('artwork').innerHTML = artwork[<?php echo $int_id_image;?>].firstChild.nodeValue;

et mon javascript entier

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<script type="text/javascript">
window.onload = function (){
request(readData);
}
var docXml;
function request(callback) {
	var xhr = getXMLHttpRequest();
 
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			callback(xhr.responseXML);
			docXml = xhr.responseXML;
		}
	};
	xhr.open("GET", "recup_images.php?nr=<?php echo $int_id_rubrique;?>", true);
	xhr.send(null);
 
}
 
function readData(docXml) {
 
	var MaxNode = docXml.getElementsByTagName('place_image').length;
	//document.getElementById('spCompteur').innerHTML = MaxNode;
	// Attention quand je récupère un élément par TagName je récupère un tableau d'ou le titre[0].firstChild.nodeValue;
	var titre = docXml.getElementsByTagName('titre');
	document.getElementById('title').innerHTML = titre[<?php echo $int_id_image;?>].firstChild.nodeValue;
 
	var artwork = docXml.getElementsByTagName('artwork');
	document.getElementById('artwork').innerHTML = artwork[<?php echo $int_id_image;?>].firstChild.nodeValue;
 
	var chemin = docXml.getElementsByTagName('chemin');
	document.images["monImage"].src = chemin[<?php echo $int_id_image;?>].firstChild.nodeValue;
 
	return docXml;
	}
 
var compteur = <?php echo $int_id_image;?>;
 
	 function suivant()
	 {
		compteur++;
		if (compteur == docXml.getElementsByTagName('image').length) {
		compteur = 0;
		}
		afficheImage(compteur);
	 }
 
	 function precedent()
	 {
		compteur--;
		if (compteur < 0){
			compteur = docXml.getElementsByTagName('image').length-1;
		}
		afficheImage(compteur);
	 }
 
	function afficheImage(compteur){
	var numero = parseInt(compteur);
	var chemin = docXml.getElementsByTagName('chemin');
	var titre = docXml.getElementsByTagName('titre');
	var artwork = docXml.getElementsByTagName('artwork');
 
	// Attention quand je récupère un élément par TagName je récupère un tableau d'ou le titre[compteur].firstChild.nodeValue;
 
	document.getElementById('title').innerHTML = titre[compteur].firstChild.nodeValue;
	document.getElementById('artwork').innerHTML = artwork[compteur].firstChild.nodeValue;
	document.images["monImage"].src = chemin[numero].firstChild.nodeValue;
	}
 
document.onkeydown = function(e){
		 if (e.keyCode == 37)precedent();
		 if (e.keyCode == 39) suivant();
}
 
</script>

Si quelqu'un à une idée empêcher cette erreur

Merci

21/09/2011, 11h33
RomainVALERI

code généré stp ^^ pas de php ici
21/09/2011, 11h49
Irokoi

C'est le javascript qui bloque sur IE
le code que j'ai mis sur le forum est du javascript
21/09/2011, 11h54
andry.aime

Bonjour,

Tu as déclarés docXml en variable globale, or que tu l'utilises comme nom de paramètre dans la fonction readData. C'est pas très jolie ça.
Sinon, ouvre la page sur ton navigateur et montre nous le code source qu'il affiche mais pas celui qui a encore de php.

A+.
21/09/2011, 11h55
vermine

Non c'est le code php comme on peut le voir à plusieurs endroits :

Code:

artwork[<?php echo $int_id_image;?>].firstChild.nodeValue;

:mrgreen:

En fait nous ne pouvons pas être certain des valeurs que le php va laisser après son passage. Or ce sont bien ces valeurs qui intéressent le Javascript.

voila la page entière

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
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
151
152
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="inc/css/general.css" rel="stylesheet" type="text/css" />
<title>Emilie Moysson Photographe</title>
<script src="inc/js/oXHR.js" type="text/javascript" ></script>
<script type="text/javascript">
window.onload = function (){
request(readData);
}
var docXml;
function request(callback) {
	var xhr = getXMLHttpRequest();
 
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			callback(xhr.responseXML);
			docXml = xhr.responseXML;
		}
	};
	xhr.open("GET", "recup_images.php?nr=2", true);
	xhr.send(null);
 
}
 
function readData(docXml) {
 
	var MaxNode = docXml.getElementsByTagName('place_image').length;
	//document.getElementById('spCompteur').innerHTML = MaxNode;
	// Attention quand je récupère un élément par TagName je récupère un tableau d'ou le titre[0].firstChild.nodeValue;
	var titre = docXml.getElementsByTagName('titre');
	document.getElementById('title').innerHTML = titre[2].firstChild.nodeValue;
 
	var artwork = docXml.getElementsByTagName('artwork');
	document.getElementById('artwork').innerHTML = artwork[2].firstChild.nodeValue;
 
	var chemin = docXml.getElementsByTagName('chemin');
	document.images["monImage"].src = chemin[2].firstChild.nodeValue;
 
	return docXml;
	}
 
var compteur = 2;
 
	 function suivant()
	 {
		compteur++;
		if (compteur == docXml.getElementsByTagName('image').length) {
		compteur = 0;
		}
		afficheImage(compteur);
	 }
 
	 function precedent()
	 {
		compteur--;
		if (compteur < 0){
			compteur = docXml.getElementsByTagName('image').length-1;
		}
		afficheImage(compteur);
	 }
 
	function afficheImage(compteur){
	var numero = parseInt(compteur);
	var chemin = docXml.getElementsByTagName('chemin');
	var titre = docXml.getElementsByTagName('titre');
	var artwork = docXml.getElementsByTagName('artwork');
 
	// Attention quand je récupère un élément par TagName je récupère un tableau d'ou le titre[compteur].firstChild.nodeValue;
 
	document.getElementById('title').innerHTML = titre[compteur].firstChild.nodeValue;
	document.getElementById('artwork').innerHTML = artwork[compteur].firstChild.nodeValue;
	document.images["monImage"].src = chemin[numero].firstChild.nodeValue;
	}
 
document.onkeydown = function(e){
		 if (e.keyCode == 37)precedent();
		 if (e.keyCode == 39) suivant();
}
 
</script>
<script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-25850115-1']);
  _gaq.push(['_setDomainName', '.emiliemoysson.com']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script>
 
</head>
 
<body>
 
 
 
 
 
            		<div id="lien_index">
                    <ul>
 
            							<li><a href="index.php?nr=1" class="lien_principaux">portrait1</a></li>
 
										<li><a href="index.php?nr=2" class="select">portrait2</a></li>
 
										<li><a href="index.php?nr=3" class="lien_principaux">music</a></li>
 
 
										<li><a href="index.php?nr=4" class="lien_principaux">fashion & beauty</a></li>
 
										<li><a href="index.php?nr=5" class="lien_principaux">personal work</a></li>
 
										<li><a class="lien_principaux" href="contact.php">contact</a></li>
					</ul>
					</div>
 
 
 
 
            		<table class="detail" border="0" cellpadding="0" cellspacing="0">
 
 
 
                        <tr><td class="cellule_tableau_detail">
 
                            <span id="title"></span>
                        </td></tr>
                        <tr><td class="cellule_tableau_detail">
                            <div onclick="precedent();" class="precedent"><img src="images/fleche_gauche_detail.png" width="8" height="8" class="fleche" /></div> <span id="artwork"></span> 
                            <div onclick="suivant();" class="suivant"><img src="images/fleche_droite_detail.png" width="8" height="8" /></div>
                        </td></tr>
 
                        <tr><td class="cellule_tableau_detail">
                        <div id="image"><img name="monImage" src="" alt="" class="image_range" /></div>
                        </td></tr>
 
                    	<tr><td class="cellule_tableau_detail">
 
                        </td></tr>
 
 
					</table>        
 
</body>
</html>

21/09/2011, 12h05
Irokoi

Je suis obligé de déclarer docXml en variable global sinon ça ne fonctionne pas sur safari
21/09/2011, 12h38
SpaceFrog

se mefier de firstChild sous IE ...
27/09/2011, 14h19
Irokoi

L'erreur se faisait sur IE en fait lorsque mon xml présentait une donnée null
pour y remédier il fallait donc remplacer la donnée par un caractère.

IE c'est de la bonne grosse merde...

Merci tout le monde.
27/09/2011, 14h31
andry.aime
Bonsoir,

Quand une donnée est null, tu dois écrire

Code:

<nomTag />

Avec

Citation:

<nomTag></nomTag>

ton xml est mal structuré, moi aussi j'en ai marre de IE mais sur ce cout, ceux sont les autres navigateurs qui sont permissifs. Ton firstChild sera donc null.
Pour ne pas utiliser des conditions pour vérifier si le tag aura ou non une valeur, utilise un tag auto-fermant avec un attibut.

Code:

<nomTag value="laDonneeIci"/>

Coté Javascript, tu le récupères de cette façon:
Code:

1 2 var titre = docXml.getElementsByTagName('titre'); document.getElementById('title').innerHTML = titre[2].getAttribute("value");
A+.