Discussion :

[The Climber]

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 :

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

[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

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

[Auteur]

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é

Par exemple (dans le cas if (type == "photo")) :

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

[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

[SpaceFrog]

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

[Auteur]

SpaceFrog propose cette syntaxe :

Code :

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

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

Donc écris ceci :

Code :

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

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 :

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

[The Climber]

Ok...

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

@ +

[The Climber]

Ok ben tout est ok...

Sa fonctionne

[Auteur]

attention j'ai fait une faute de frappe :

Code :

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

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