Incompatibilité FF - IE

**oneTime** · 11/05/2008, 23h53

Bonsoir à tous,

je développe actuellement un système assez sympa pour proposer à un internaute d'uploader des images à certains endroits d'une page.
La disposition des images se fait en colonnes et rangées : je n'utilise pas de tableau HTML pour cela.
J'utilise des div positionnés en colonnes qui, lorsque l'on clique dessus, se change en input type="file".
Je dispose également d'un lien "Ajouter une rangée de photos" qui génère une nouvelle rangée à 4 colonnes de photos.

Ce système fonctionne sous Firefox mais pas sous IE6... Pouvez-vous me dire pourquoi ?

NB : désolé pour la mocheté du code HTML, ce n'est pas moi qui ai fait la mise en page...

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
 
var compteur_rangee = 1;
var nb_photos = 4;
 
</script>
</head>
 
<script type="text/javascript">
 
 
function suppr_image(elem) {
 
	add_input(elem);
 
}
 
 
function add_input(elem) {
 
	nouvdiv = document.createElement('div');
	nouvinput = document.createElement('input');
	nouvinput.setAttribute("type", "file");
	nouvinput.setAttribute("name", "photo_1");
 
	elem.parentNode.replaceChild(nouvdiv, elem);
	nouvdiv.appendChild(nouvinput);
 
}
 
 
function add_rangee() {
 
	conteneur = document.createElement('div');
	conteneur.setAttribute("id", "rangee"+(compteur_rangee+1));
	conteneur.setAttribute("class", "rangee_photos");
 
	nouvdiv1 = document.createElement('div');
	nouvdiv1.setAttribute("id", "photo"+(nb_photos+1));
	nouvdiv1.setAttribute("class", "photo_rangee col1");
	nouvdiv1.setAttribute("onclick", "suppr_image(this);");
 
	nouvdiv2 = document.createElement('div');
	nouvdiv2.setAttribute("id", "photo"+(nb_photos+2));
	nouvdiv2.setAttribute("class", "photo_rangee col1");
	nouvdiv2.setAttribute("onclick", "suppr_image(this);");
 
	nouvdiv3 = document.createElement('div');
	nouvdiv3.setAttribute("id", "photo"+(nb_photos+3));
	nouvdiv3.setAttribute("class", "photo_rangee col1");
	nouvdiv3.setAttribute("onclick", "suppr_image(this);");
 
	nouvdiv4 = document.createElement('div');
	nouvdiv4.setAttribute("id", "photo"+(nb_photos+4));
	nouvdiv4.setAttribute("class", "photo_rangee col1");
	nouvdiv4.setAttribute("onclick", "suppr_image(this);");
 
	titre_rangee = document.createElement('p');
	texte_rangee = document.createTextNode("Rangée de photos n°"+(compteur_rangee+1));
	titre_rangee.appendChild(texte_rangee);
 
 
	document.getElementById("conteneur_rangees").appendChild(titre_rangee);
	cont = document.getElementById("conteneur_rangees").appendChild(conteneur);
	cont.appendChild(nouvdiv1);
	cont.appendChild(nouvdiv2);
	cont.appendChild(nouvdiv3);
	cont.appendChild(nouvdiv4);
 
	compteur_rangee++;
 
}
 
</script>
<body>
 
<div id="contenu_css">
	<div id="petit_contenu_css">
	<div id="conteneur">
	<div id="titre_h2"><h2>Administration</h2> > <h3>Reportages</h3></div>
	<?php 
                if (isset($_GET["action"])) {
                        switch ($_GET["action"]) { 
                                                                        
                        default : ; break;
                                                                                
                        case "nouveau" : ?>
 
			<form method="post" name="nouv_report" action="" enctype="multipart/form-data">
			<table id="form_report">
				<tr>
					<td valign="top">Date</td><td valign="top"><input type="text" name="titre" size="20" /></td>
				</tr>
				<tr>
					<td valign="top">Commentaire</td><td valign="top"><textarea name="commentaire" cols="40" rows="6"></textarea></td>
				</tr>
			</table>
			<p>Photo principale : </p>
			<div id="photo_p" onclick="suppr_image(this);"></div>
			<p>Rangée de photos n° 1 : </p>
			<div id="conteneur_rangees">
				<div id="rangee1" class="rangee_photos">
					<div class="photo_rangee" id="photo_1" onClick="suppr_image(this);"></div>
					<div class="photo_rangee col1" id="photo_2" onClick="suppr_image(this);"></div>
					<div class="photo_rangee col1" id="photo_3" onClick="suppr_image(this);"></div>
					<div class="photo_rangee col1" id="photo_4" onClick="suppr_image(this);"></div>
 
 
				</div>
			</div>
			<br />
			<div id="ajout"><a href="#" onClick="add_rangee();">Ajouter une rangée supplémentaire</a></div>
 
			<p><input type="submit" value="Enregistrer"></p>
			</form>
 
		<?php   ;
                }
        }
        else { ?>
		<p><a href="adminsite08_reportages.php?action=nouveau">Créer un nouveau reportage</a></p>
		<div id="liste_reportages"><p>Modifier un reportage existant :</p>
		<?php 
                        include_once('classes/Parse.class.php');
                        $parse = new Parse("txt-html");
                        echo $parse->liste_reportages(0,"colonnes");
        }
        ?>
		</div>
	</div>
	</div>
	</div>
 
</body>
</html>

**Auteur** · 12/05/2008, 00h15

bonjour,

IE ne connait pas setAttribute et getAttribute. Utilise donc la syntaxe commune aux navigateurs et qui est plus simple :

Code javascript :

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

1
2
3
 
nouvinput.setAttribute("type", "file");
nouvinput.setAttribute("name", "photo_1");

devient :

Code javascript :

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

1
2
3
 
nouvinput.type = "file";
nouvinput.name = "photo_1";

une remarque en passant : privilégie id à name

**Auteur** · 12/05/2008, 00h20

pour onclick (et autres événements) c'est plus complexe, surtout s'il y le paramètre this :

Code javascript :

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

1
2
 
nouvdiv4.setAttribute("onclick", "suppr_image(this);");

devient :

Code javascript :

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

1
2
3
 
nouvdiv4.objetDiv4 = nouvdiv4;
nouvdiv4.onclick = function(){suppr_image(this.objetDiv4);}

**oneTime** · 12/05/2008, 00h25

Merci j'ai effectué toutes les modifs... Seulement maintenant aucun des deux navigateurs n'affichent les images lors de la génération d'une nouvelle rangée de photos...
Le texte "Rangée de photo n°X" s'affiche bien mais pas les div qui vont dessous...

**Auteur** · 12/05/2008, 00h35

Ce qui m'embête dans ce code JS c'est que des variables ne sont pas déclarées (FF n'apprécie pas trop).

Ensuite, je me demande si tu ne crées pas des éléments ayant le même id (fonction add_rangee() où nb_photos est une constante).

Le texte "Rangée de photo n°X" s'affiche bien mais pas les div qui vont dessous...

quelle est l'erreur retournée ?

**oneTime** · 12/05/2008, 00h41

Plus d'erreurs maintenant, tu avais raison pour les variables : j'ai corrigé ça et IE6 ne m'affiche plus d'erreur à l'exécution du script.

Après avoir vérifié avec des alert(), les éléments nouvdiv sont bien créés (objectHTMLDivElement) mais pas insérés dans le conteneur_rangees... sous IE6 bien sûr.

Code :

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

1
2
3
4
5
6
 
cont = document.getElementById("conteneur_rangees").appendChild(conteneur);
cont.appendChild(nouvdiv1);
cont.appendChild(nouvdiv2);
cont.appendChild(nouvdiv3);
cont.appendChild(nouvdiv4);

Quelqu'un a une idée ?

**oneTime** · 12/05/2008, 12h36

up !

**Sacha999** · 12/05/2008, 13h40

Je ne suis pas sur que "appendChild" retourne un element, donc je presume que "cont" est vide. D'ailleurs pourquoi tu veux stocker dans "cont" alors que l'element est deja dans "conteneur"?

**oneTime** · 12/05/2008, 19h01

Oui... Mais en modifiant par ceci :

Code :

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

1
2
3
4
5
6
7
 
	document.getElementById("conteneur_rangees").appendChild(titre_rangee);
	document.getElementById("conteneur_rangees").appendChild(conteneur);
conteneur.appendChild(nouvdiv1);
conteneur.appendChild(nouvdiv2);
conteneur.appendChild(nouvdiv3);
conteneur.appendChild(nouvdiv4);

J'ai toujours le même résultat : les rangées de photos supplémentaires s'affichent et fonctionnent correctement sous FF mais ne s'affichent pas sous IE6.

J'ai cependant une piste : les nouvdiv sont considérés comme [object] sous IE et comme [object HTMLDivElement] sous Firefox...

**Auteur** · 12/05/2008, 19h24

Envoyé par oneTime

J'ai cependant une piste : les nouvdiv sont considérés comme [object] sous IE comme [object HTMLDivElement] sous Firefox...

Non ce n'est pas une piste. Simplement FF est plus précis dans la désignation des éléments (FF te dit que tu as créés des objets HTML de type div, IE dit que tu as créé des objets sans plus).

Le fait que IE et FF retourne des objets est déjà bon signe : cela veut dire qu'ils sont créés

Montre nous ton code après les corrections que nous t'avons conseillées de faire

**oneTime** · 12/05/2008, 20h02

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
 
<script type="text/javascript">
 
function suppr_image(elem) {
 
	add_input(elem);
 
}
 
 
function add_input(elem) {
 
	nouvdiv = document.createElement('div');
	nouvinput = document.createElement('input');
	nouvinput.setAttribute("type", "file");
	nouvinput.setAttribute("id", "photo_1");
 
	elem.parentNode.replaceChild(nouvdiv, elem);
	nouvdiv.appendChild(nouvinput);
 
}
 
 
function add_rangee() {
 
	var conteneur = document.createElement('div');
	conteneur.setAttribute("id", "rangee"+(compteur_rangee+1));
	conteneur.setAttribute("class", "rangee_photos");
 
	var nouvdiv1 = document.createElement('div');
	nouvdiv1.setAttribute("id", "photo"+(nb_photos+1));
	nouvdiv1.setAttribute("class", "photo_rangee col1");
	nouvdiv1.onclick = function() {suppr_image(this); };
 
	var nouvdiv2 = document.createElement('div');
	nouvdiv2.setAttribute("id", "photo"+(nb_photos+2));
	nouvdiv2.setAttribute("class", "photo_rangee col1");
	nouvdiv2.onclick = function() {suppr_image(this); };
 
	var nouvdiv3 = document.createElement('div');
	nouvdiv3.setAttribute("id", "photo"+(nb_photos+3));
	nouvdiv3.setAttribute("class", "photo_rangee col1");
	nouvdiv3.onclick = function() {suppr_image(this); };
 
	var nouvdiv4 = document.createElement('div');
	nouvdiv4.setAttribute("id", "photo"+(nb_photos+4));
	nouvdiv4.setAttribute("class", "photo_rangee col1");
	nouvdiv4.onclick = function() {suppr_image(this); };
 
	titre_rangee = document.createElement('p');
	texte_rangee = document.createTextNode("Rangée de photos n°"+(compteur_rangee+1));
	titre_rangee.appendChild(texte_rangee);
 
 
        document.getElementById("conteneur_rangees").appendChild(titre_rangee);
        document.getElementById("conteneur_rangees").appendChild(conteneur);
        conteneur.appendChild(nouvdiv1);
        conteneur.appendChild(nouvdiv2);
        conteneur.appendChild(nouvdiv3);
        conteneur.appendChild(nouvdiv4);
 
	compteur_rangee++;
 
}
 
</script>

Le reste n'a pas changé.

**Auteur** · 12/05/2008, 23h50

Envoyé par Auteur

bonjour,

IE ne connait pas setAttribute et getAttribute. Utilise donc la syntaxe commune aux navigateurs et qui est plus simple :

Code javascript :

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

1
2
3
 
nouvinput.setAttribute("type", "file");
nouvinput.setAttribute("name", "photo_1");

devient :

Code javascript :

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

1
2
3
 
nouvinput.type = "file";
nouvinput.name = "photo_1";

une remarque en passant : privilégie id à name

Envoyé par Auteur

pour onclick (et autres événements) c'est plus complexe, surtout s'il y le paramètre this :

Code javascript :

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

1
2
 
nouvdiv4.setAttribute("onclick", "suppr_image(this);");

devient :

Code javascript :

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

1
2
3
 
nouvdiv4.objetDiv4 = nouvdiv4;
nouvdiv4.onclick = function(){suppr_image(this.objetDiv4);}

donc ton code devient (pour la fonction add_rangee) :

Code javascript :

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
 
function add_rangee() 
{
 
	var conteneur = document.createElement('div');
	conteneur.id = "rangee"+(compteur_rangee+1);
	conteneur.className = "rangee_photos";
 
	var nouvdiv1 = document.createElement('div');
	nouvdiv1.id = "photo"+(nb_photos+1);
	nouvdiv1.className = "photo_rangee col1";
 
  nouvdiv1.div1 = nouvdiv1;
	nouvdiv1.onclick = function() {suppr_image(this.div1); };
 
	var nouvdiv2 = document.createElement('div');
	nouvdiv2.id = "photo"+(nb_photos+2);
	nouvdiv2.className = "photo_rangee col1";
 
  nouvdiv2.div2 = nouvdiv2;  
	nouvdiv2.onclick = function() {suppr_image(this.div2); };
 
	var nouvdiv3 = document.createElement('div');
	nouvdiv3.id = "photo"+(nb_photos+3);
	nouvdiv3.className = "photo_rangee col1";
 
  nouvdiv3.div3 = nouvdiv3;
	nouvdiv3.onclick = function() {suppr_image(this.div3); };
 
	var nouvdiv4 = document.createElement('div');
	nouvdiv4.id = "photo"+(nb_photos+4);
	nouvdiv4.className =  "photo_rangee col1";
 
  nouvdiv4.div4 = nouvdiv4;
	nouvdiv4.onclick = function() {suppr_image(this.div4); };
 
	var titre_rangee = document.createElement('p');
	var texte_rangee = document.createTextNode("Rangée de photos n°"+(compteur_rangee+1));
	titre_rangee.appendChild(texte_rangee);
 
 
  document.getElementById("conteneur_rangees").appendChild(titre_rangee);
  document.getElementById("conteneur_rangees").appendChild(conteneur);
  conteneur.appendChild(nouvdiv1);
  conteneur.appendChild(nouvdiv2);
  conteneur.appendChild(nouvdiv3);
  conteneur.appendChild(nouvdiv4);
 
	compteur_rangee++;
 
}

Corrige également la fonction add_input() selon le modèle et les indications ci-dessus

Le code fonctionne sous IE et FF.

Maintenant je crains que les div qui sont créés (div1, div2, div3 et div4) au fur et à mesure que add_rangee est appelée aient le même id.

**oneTime** · 14/05/2008, 17h10

Problème résolu, merci pour tout !

Incompatibilité FF - IE

JavaScript

Discussions similaires

Partager

Partager