DOM Compatible IE

**MichaelVDH** · 10/01/2011, 15h57

Salut à tous,

Après m'être arraché les cheveux pour créer un formulaire d'upload dynamique, tout content, cela fonctionne sous Firefox mais après test sous IE, j'avais une légère envie de balancer mon ecran par la fenetre

. Auriez-vous quelques conseils pour rendre compatible ma fonction sous IE

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
function formPhoto(id)
{
 
var table = document.createElement('table');
table.id = 'tableUp'+id;
 
var tr = document.createElement('tr');
var td = document.createElement('td');
td.id = 'formUp'+id;
 
var td2 = document.createElement('td');
td2.id = 'fileUp'+id;
 
var form = document.createElement('form');
form.action = 'php/annonce/uploadPhoto.php';
form.method = 'post';
form.enctype = 'multipart/form-data';
form.name = 'form'+id;
form.target = 'uploadTarget';
 
var input = document.createElement('input');
input.type = 'file';
input.name = 'photo'+id;
input.setAttribute("onChange", "uploadPhoto("+id+")");
 
var hiddenInput = document.createElement('input');
hiddenInput.type = 'hidden';
hiddenInput.name = 'hiddenField';
hiddenInput.value = id;
 
td.appendChild(hiddenInput);
td.appendChild(input);
tr.appendChild(td);
tr.appendChild(td2);
table.appendChild(tr);
form.appendChild(table);
document.getElementById('formPhoto').appendChild(form);
 
}

Merci à vous

**NoSmoking** · 10/01/2011, 19h08

Bonjour,
il existe pour les éléments TABLE les méthodes insertRow et insertCell qui elles ne buguent pas et ce quelque soit le navigateur.

Quoiqu'il en soit IExplorer apprécie que les éléments soient appendés * au TBODY

donc il te faut

Code :

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

1
2
3
4
5
6
7
8
9
10
var table = document.createElement('table');
table.id = 'tableUp'+id;
// AJOUT DE LA CREATION DE TBODY
var tb = document.createElement('tbody');
var tr = document.createElement('tr');
//...la suite
tr.appendChild(td2);
// AJOUT DANS TBODY
tb.appendChild(tr);
table.appendChild(tb);

* pas vérifier l'existence du verbe

**Bovino** · 10/01/2011, 19h22

+1 pour les méthodes spécifiques aux tables NoSmoking, ceci dit, je pense qu'ici le problème vient surtout de l'ajout dynamique d'éléments de formulaires et en particulier l'attribution du name par script

@MichaelVDH : tu devrais regarder cette discussion : [SRC] [FORM][DOM][DYNAMIQUE]mais pas que form

**NoSmoking** · 10/01/2011, 20h49

j'ai effectivement souvenir qu'IExplorer est un peu réticent, le mot est faible, avec les ajouts dynamiques de certains éléments et l'affectation de certains attributs, je prendrais donc le temps de lire le lien qui est indiqué ne retrouvant pas les notes que j'avais prises à ce sujet.
La prise en compte du NAME étant effective, il suffit de faire une soumission en method="GET" et de regarder la barre d'adresse, mais ne permet pas d'accéder à l'élément à travers celui ci voila le pourquoi il faut doubler par une ID identique.

J'ai également souvenir que setAttribute( 'NAME', 'le_nom'); marche si NAME est en majuscule, enfin plein de petits trucs de ce style.

Il est aussi parfois, lorsque l'on ne crée que quelques éléments en dynamique, préférable de les créer sur la page et de ce contenter de les masquer et de les afficher aux besoins.

j'en oublie sûrement...

**MichaelVDH** · 11/01/2011, 10h03

Rha merci Micro$oft

Je n'ai pas encore eu le temps de regarder le lien que tu m'as donné.

Mais quand je regarde dans le debugger d'IE8, mon formulaire, le code que donne ma fonction donne ceci :

Code html :

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

1
2
3
4
5
6
<form name="form1" action="php/annonce/uploadPhoto.php" encType="multipart/form-data" method="post" target="uploadTarget">
<table id="tableUp1">
<tr>
<td id="formUp1">
<INPUT value=1 type=hidden name=hiddenField>
<INPUT onchange=uploadPhoto(1) value=C:\fakepath\logo.png type=file name=photo1>

pour les name j'ai effectivement du changer par un setAttribute, dans ma page de destination, je n'ai aucun soucis pour récupérer le champ "hiddenField" mais pour c'est vraiment au niveau du champ de type file que j'ai un soucis, je ne pense pas non plus que le soucis vienne de ma balise form car elle envois correctement vers mon iframe, donc toujours un peu perdu

En tout cas merci pour vos réponse

**Bovino** · 11/01/2011, 10h07

Essaye de changer

Code :

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

input.setAttribute("onChange", "uploadPhoto("+id+")");

par

Code :

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

input.onchange = function(){uploadPhoto(id)};

**MichaelVDH** · 13/01/2011, 16h02

J'ai du "nouveau"... et je ne comprends pas

J'ai voulu refaire une tentative sur cette fois sous IE7 (d'ailleurs très pratique IECollection pour faire tourner plusieurs IE sur un pc)

J'ai réussis à récupérer ma variable du formulaire dynamique dans la page "test.php" seul chose qui change comparativement à avant, j'ai appellé ma fonction dans le body avec onload

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
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script language="javascript" type="text/javascript">
function formu()
{

var form = document.createElement('form');
form.setAttribute('name','form1');
form.setAttribute('method','post');
form.setAttribute('enctype','multipart/form-data');
form.setAttribute('action','test.php');

var input = document.createElement('input');
input.setAttribute('name','photo');
input.setAttribute('type','file');

var button = document.createElement('input');
button.setAttribute('type','submit');
button.setAttribute('value','Envoyer');

form.appendChild(input);
form.appendChild(button);
document.getElementById('formulaire').appendChild(form);

}
</script>
</head>

<body onload="formu()">
<div id="formulaire"></div>
</body>

Si vous comprenez n'hésitez pas pcq je suis largué la

**RomainVALERI** · 13/01/2011, 16h44

Envoyé par MichaelVDH

(d'ailleurs très pratique IECollection pour faire tourner plusieurs IE sur un pc)

Ce n'est pas un avis partagé par l'ensemble des pros du secteur ^^

**Bovino** · 13/01/2011, 16h53

d'ailleurs très pratique IECollection pour faire tourner plusieurs IE sur un pc

Certainemment pas

La plupart de ces softs utilisent en fait les dll de la version de IE installée sur le poste et ne sont pas vraiment fiables.
Voir : Testez vos applications Web fiablement sous les navigateurs sur ce sujet.