[DOM] Fonction JS ne voulant pas fonctionner sous IE

Version imprimable

Bonjour,

Je ne comprend pas pouquoi ma fonction JS ne marche pas sous IE (testé seulement sous IE7)...
Pour que vous puissiez m'aider, je vous la donne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function doc(type, i) { var code = ''; if (type == "photo") { //<![CDATA[ code += '<label>Fichier :</label><input type="file" name="file_' + i + '" /><br />'; //]]> } else if (type == "video") { //<![CDATA[ code += '<label>Depuis quel Site ?</label><select name="site_' + i + '" disabled="disabled">'; code += ' <option value="youtube" selected="selected">Youtube.com</option>'; code += ' <option value="daylimotion">Daylimotion.com</option>'; code += '</select><br />'; code += '<label>Lien de la vidéo :</label><input type="text" name="file_' + i + '" /><br />'; //]]> } document.getElementById('doc_' + i).innerHTML = code; }
Le but de cette fonction est de faire changer ce qu'il y a dans une div en fonction que le bouton radio soit positionner sur Image ou Vidéo...

Merci d'avance pour votre aide
The Climber

30/09/2008, 14h54
Auteur

bonjour,

pour ajouter des composants HTML (input, label, select) dans une page il vaut mieux utiliser des fonctions DOM plutôt qu'innerHTML.

- voir :
createElement()
appendChild()
- pour le select :
voir l'objet new Option() et la fonction add de l'objet select.option.

Exemple de manipulation du DOM
30/09/2008, 15h17
The Climber

et il n'existe pas d'autre moyen ???

Car le dom je n'y comprend rien...

Mais merci déjà pour la réponse...

Citation:

Envoyé par The Climber

et il n'existe pas d'autre moyen ???

Car le dom je n'y comprend rien...

pas d'autres moyens. Pour le DOM rien de bien méchant, il suffit d'être organisé :D

Par exemple (dans le cas if (type == "photo")) :
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 var monLabel, txtLabel; var monInput; var monBR; var formulaire; // création du label monLabel = document.createElement("label"); // création du label txtLabel = document.createTextNode("Fichier :"); // création du texte du label monLabel.appendChild(txtLabel); // insertion du noeud texte dans le label // création de l'input monInput = document.createElement("input"); monInput.type = "file"; monInput.name = "file_" + i; // /!\ non pris en charge par IE monInput.id = "file_" + i; // création du saut de ligne : monBR = document.createElement("br"); // ajout des composants dans le formulaire formulaire = document.getElementById("idFormulaire"); // formulaire = balise form ! formulaire.appendChild(monLabel); formulaire.appendChild(monInput); formulaire.appendChild(monBR);
Attention :
- IE n'accepte pas l'attribution d'une valeur à l'attribut name dans un script. Pour "palier" à ce problème, j'ai donné à name et id la même valeur.
- FF refuse que les balises de dédiées aux formulaires (input, label, select, etc.) soient insérées en dehors d'une balise form ! Tu dois donc insérer tes composants dans une balise form.

30/09/2008, 15h51
The Climber

Merci pour le code que tu m'as donné, mais par contre j'ai une autre question :
Comment on fait pour donner un Name avec IE ???

Car j'utilise ce code dans un formulaire traité par PHP et j'ai absolument besoin d'un Name...

Merci d'avance...
The Climber
30/09/2008, 15h58
SpaceFrog

Au pire dasn les contribution sil y a une petit librairie qui permet de créer facilement des objets avec le DOM

SpaceFrog propose cette syntaxe :

Code:

1
2
3
 
var str = "<input name='file_'"+i+">";
monInput = document.createElement(str);

Dans ce cas l'input aura un name.

Gros problème : cette syntaxe n'est pas valide sous FF :aie:

Donc écris ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
if (document.all)  // pour IE
{
  var str = "<input name='file_'"+i+">";
  monInput = document.createElement(str);
}
else  
{ // pour FF et autres navigateurs
  monInput = document.createElement("input");
}
 
// suite du code :
monInput.type = "file";
//... etc.

ou plus subtil :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
// création de l'input
try
{
  // ce code génère une exception sous FF => le contenu du catch est exécuté
  // ce code sera exécuté sans problème sous IE
  var str = "<input name='file_'"+i+">";
  monInput = document.createElement(str);
}
catch(erreur) 
{
  monInput = document.createElement("input");
}
 
// suite du code :
monInput.type = "file";
//... etc.

30/09/2008, 16h20
The Climber

Ok...

Merci Auteur. Je testerais ce soir à la maison...
et je verrais après quoi comment...

@ +
30/09/2008, 18h03
The Climber

Ok ben tout est ok...

Sa fonctionne

attention j'ai fait une faute de frappe :
Code:

1 2 3 4 5 6 7 8 9 10 if (document.all) // pour IE { var str = "<input name='file_"+i+"'>"; monInput = document.createElement(str); } else { // pour FF et autres navigateurs monInput = document.createElement("input"); }
je n'ai pas mis la simple quote au bon endroit ;)