DOM Compatible IE

Version imprimable

Voir 40 message(s) de cette discussion en une page

DOM Compatible IE

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 :cry: . Auriez-vous quelques conseils pour rendre compatible ma fonction sous IE :calim2:

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
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

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:

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

10/01/2011, 19h22
Bovino

+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
10/01/2011, 20h49
NoSmoking

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...

Rha merci Micro$oft :evilred:

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:

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

11/01/2011, 10h07
Bovino

Essaye de changer

Code:

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

par

Code:

input.onchange = function(){uploadPhoto(id)};
11/01/2011, 10h42
MichaelVDH

Non toujours pas, par contre input.onchange = function(){uploadPhoto(id)};
fonctionne sur Firefox chose que je n'etais pas arrivé à faire sans setAttribute.

Le problème à mon avis le problème ne peut provenir que de l'input type=file

j'ai ceci comme erreur dans mon iFrame :

Notice: Undefined index: photo1 in I:\Web\Okaz\php\annonce\uploadPhoto.php on line 6

Notice: Undefined index: photo1 in I:\Web\Okaz\php\annonce\uploadPhoto.php on line 10

et photo1 correspond au champ file, donc c'est comme s'il n'arrivait pas à trouver ce champ dans mon traitement PHP, donc il ne doit pas être envoyé, je pense
11/01/2011, 11h20
RomainVALERI

Citation:

Envoyé par MichaelVDH

...donc il ne doit pas être envoyé, je pense

Plutot que de le supposer, pour en avoir le coeur net : LiveHTTPHeaders (module complémentaire sous FF)

Sous firefox je n'ai aucun problème pour le récupérer donc, oui il l'envoie mais sous FF now sous IE c'est une autre histoire.

J'ai tenté de simplifié au max mon script pour voir ce qui se passait et éliminer un max de variable :

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
<script language="javascript" type="text/javascript">
function createForm()
{
var form = document.createElement('form');
form.action = 'test.php';
form.method = 'post';
form.enctype = 'multipart/form-data';
form.setAttribute('NAME','form1');
 
var file = document.createElement('input');
file.type = 'file';
file.setAttribute('NAME','photo');
file.onchange = function(){send()};
 
var button = document.createElement('input');
button.setAttribute('NAME','button');
button.type = 'submit';
 
form.appendChild(button);
form.appendChild(file);
 
document.getElementById("formSend").appendChild(form);
}
 
 
</script>
</head>
 
<body>
<div id="formSend"><script language="javascript">createForm();</script></div>
</body>
</html>

De nouveau IE ne choppe pas mon input :cry:

11/01/2011, 11h45
Bovino

Essaye peut-être en testant le navigateur et en utilisant la syntaxe

Code:

document.createElement('<input type="file" name="photo" />')

pour IE :?
11/01/2011, 15h19
NoSmoking

Citation:

Envoyé par MichaelVDH

De nouveau IE ne choppe pas mon input

cela correspond à quoi en réalité, pas de reconnaissance, pas de transfert, pas de réception...

Si non voir les restrictions éventuelles input type=file.
12/01/2011, 13h37
MichaelVDH

@Bovino : Fonctionne pas malheureusement grrrrrrrr
@NoSmoking : Alors il se passe que lorsque j'envois mon formulaire vers mon script PHP ma variable :

Code:

$_FILE['photo']['name'];

est vide donc j'ai une erreur : Undefined index
Donc d'après moi les données du formulaire file ne sont pas envoyée

Voilà le code que j'utilise pour ajouter des champs de téléchargement dans un formulaire avec javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function addDonnee(idChamp) {
   try {
      var conteneur = document.getElementById(idChamp);
 
      var ligne = document.createElement('p');
 
      var fichier = document.createElement('input');
      fichier.setAttribute('type','file');
      fichier.setAttribute('name','userfile[]');
      fichier.setAttribute('size','89');
 
      ligne.appendChild(fichier);
      conteneur.appendChild(ligne);
   }
   catch(e) {
       alert(e);
    }
}

donc rien de particulier et ça fonctionne aussi bien avec ff que sous ie, même ie6

Code:

1
2
3
4
var fichier = document.createElement('input');
fichier.type = 'file';
fichier.name = 'userfile[]';
fichier.size = '89';

12/01/2011, 22h18
NoSmoking

revenons au fondamentaux
crée dans ta page, sans passer par une fonction JavaScript, la form et les champs qui vont bien puis fait la requête et dit nous ce qui se passe...
13/01/2011, 10h16
MichaelVDH

@Bovino & ABCIWEB : Testé et toujours pas

@NoSmoking : J'ai créé une page vierge avec juste le formulaire d'up, un bouton d'envois et sous IE8 la reception des données est ok

Capte rien la

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:

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

13/01/2011, 16h44
RomainVALERI

Citation:

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 ^^
13/01/2011, 16h53
Bovino

Citation:

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

Certainemment pas :aie:

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.
13/01/2011, 17h48
MichaelVDH

Bon ca va ca va j'ai rien dit :P

J'ai résolus mon problème, est-ce le code peut intéresser quelqu'un, si oui, je le poste

En tout cas merci à tous :ccool: , c'est vraiment cool, j'espère pouvoir un peu aider sur le forum avec mes maigres connaissances.

Voir 40 message(s) de cette discussion en une page