[DOM] innerHTML et IE -_-' [Fait]

**Kyaan** · 18/12/2008, 17h42

Salut à tous, j'ai développé un script de gestion de champs de formulaire dynamiques qui fonctionne à merveille sour FireFox (amen ^^) mais qui ne fonctionne pas du tout 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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
 	//des compteurs pour chaque type de donnée
 	var id_actions_immediates = 0;
 	var id_actions_correctives = 0;
 	var id_actions_preventives = 0;
 
 	//la fonction principale qui gère l'ajout des lignes
 	function AddLine(id_table, ref, text, qui, date)
 	{
 	 	//on récupère le compteur pour le type de donnée souhaité
 	 	switch(id_table)
 	 	{
 	 		case 'action_immediate':
 	 	 		var id = id_actions_immediates++;
 	 	 		break;
 	 		case 'action_corrective':
 	 	 		var id = id_actions_correctives++;
 	 	 		break;
 	 		case 'action_preventive':
 	 	 		var id = id_actions_preventives++;
 	 	 		break;
 
 	 	}
 
 	 	//on met en mémoire les données de ce type pour ne pas les perdre lors du changement de valeur du innerHTML
 	 	var DataTable = new Array;
		for(i=0;i<id;i++)
		{
			DataTable[i] = null;
 
			if(document.getElementById(id_table + '_ref' + i))
			{
				DataTable[i] = new Array;
				DataTable[i]["ref"] = document.getElementById(id_table + '_ref' + i).value;
				DataTable[i]["text"] = document.getElementById(id_table + '_text' + i).value;
				DataTable[i]["qui"] = document.getElementById(id_table + '_qui' + i).value;
				DataTable[i]["date"] = document.getElementById(id_table + '_date' + i).value;
			}
		}
 
 	 	//on ajoute la ligne au tableau correspondant au type choisi
 		document.getElementById(id_table).innerHTML += '<tr id="' + id_table + id + '">' +
 	 													 '<td><input type="hidden" 			id="' + id_table + '_ref' + id + '" 	name="' + id_table + '_ref[]" 	value="' + ref + '"></input>' + 
 	 													 	 '<input type="text" class="at" id="' + id_table + '_text' + id + '" 	name="' + id_table + '_text[]" 	value="' + text + '" maxlenght="255"></input></td>' + 
 	 													 '<td><input type="text" class="at" id="' + id_table + '_qui' + id + '" 	name="' + id_table + '_qui[]" 	value="' + qui + '" maxlenght="30"></input></td>' + 
 	 													 '<td><input type="text" class="at" id="' + id_table + '_date' + id + '" 	name="' + id_table + '_date[]" 	value="' + date + '" maxlenght="10"></input></td>' +
 	 													 '<td><a href="javascript:void(0);" onClick="DeleteLine(\'' + id_table + id + '\');"><img src="{ babInstallPath }skins/ovidentia/images/Puces/delete.png" alt="suppr"></a></a></td>' +  
 	 													'</tr>';
 
 	 	//puis on remet les données aux bons emplacements
 		for(i=0;i<id;i++)
		{
 			if(DataTable[i] != null)
 			{
	 			document.getElementById(id_table + '_ref' + i).value = DataTable[i]["ref"];
	 			document.getElementById(id_table + '_text' + i).value = DataTable[i]["text"];
				document.getElementById(id_table + '_qui' + i).value = DataTable[i]["qui"];
				document.getElementById(id_table + '_date' + i).value = DataTable[i]["date"];
 			}
		}
 	}

Voilà ce code est parfait pour ce que je veux faire mais grrr comme par hasard ça ne fonctionne pas sous IE, le symptome est que rien ne passe quand je click sur le bouton qui appel la fonction AddLine()

Quelqu'un sait-il comment contourner ce problème sans changer complètement de mécanisme svp?

**le_chomeur** · 18/12/2008, 18h16

un bout de code html pour tester ?

**Auteur** · 18/12/2008, 18h35

Pour créer / supprimer des lignes dans un tableau HTML, il faut utiliser les fonctions DOM. Voici un exemple complet

**Saray** · 18/12/2008, 19h48

Tu ne peux pas utiliser innerHTML pour un tableau... il faut que tu passes par le DOM. Par contre tu as le droit d'utiliser innerHTML pour un td.

De plus il faut la table doit avoir une structure valide, c'est à dire posséder un thead et un tbody.

Exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
		var divbout=document.createElement('table');
		var hdivbout=document.createElement('thead');
		var bdivbout=document.createElement('tbody');
		var rdivbout=document.createElement('tr');
		var ddivbout=document.createElement('td');
 
		ddivbout.innerHTML='<span>et hop !</span>';
 
		rdivbout.appendChild(ddivbout);
		bdivbout.appendChild(rdivbout);	
		divbout.appendChild(hdivbout);
		divbout.appendChild(bdivbout);
		document.body.appendChild(divbout);

**Kyaan** · 19/12/2008, 10h23

Merci beaucoup pour vos réponses si rapides!!

J'ai cherché du coté du insertRow() et insertCell et ça a finit par donner du résultat, j'ai eu du mal à faire fonctionner la suppression de ligne mais j'ai finit par trouver une solution, voilà ce que donne le code à présent au cas où ça aiderai quelqu'un dans une recherche un jour ^^ (testé sous Firefox 3 et IE 6):

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
 	var id_actions_immediates = 0;
 	var id_actions_correctives = 0;
 	var id_actions_preventives = 0;
 
 	function AddLine(id_table, ref, text, qui, date)
 	{
 	 	switch(id_table)
 	 	{
 	 		case 'action_immediate':
 	 	 		var id = id_actions_immediates++;
 	 	 		break;
 	 		case 'action_corrective':
 	 	 		var id = id_actions_correctives++;
 	 	 		break;
 	 		case 'action_preventive':
 	 	 		var id = id_actions_preventives++;
 	 	 		break;
 
 	 	}
 
 
 		var myRow = document.getElementById(id_table).insertRow(-1);
 		myRow.id = id_table + id;
 		var myCell = myRow.insertCell(-1);
 		myCell.innerHTML += '<input type="hidden" 		   id="' + id_table + '_ref' + id + '" 		name="' + id_table + '_ref[]" 	value="' + ref + '"></input>' + 
		 	 				'<input type="text" class="at" id="' + id_table + '_text' + id + '" 	name="' + id_table + '_text[]" 	value="' + text + '" maxlenght="255"></input>';
 		myCell = myRow.insertCell(-1);
 		myCell.innerHTML += '<input type="text" class="at" id="' + id_table + '_qui' + id + '" 		name="' + id_table + '_qui[]" 	value="' + qui + '" maxlenght="30"></input>';
 		myCell = myRow.insertCell(-1);
 		myCell.innerHTML += '<input type="text" class="at" id="' + id_table + '_date' + id + '" 	name="' + id_table + '_date[]" 	value="' + date + '" maxlenght="10"></input>';
 		myCell = myRow.insertCell(-1);
 		myCell.innerHTML += '<a href="javascript:void(0);" onClick="DeleteLine(\'' + id_table + id + '\');"><img src="{ babInstallPath }skins/ovidentia/images/Puces/delete.png" alt="suppr"></a>';
 	}
 
 	function DeleteLine(id_line)
 	{
 	 	try
 	 	{
 	 	 	//firefox
 	 		document.getElementById(id_line).remove();
 	 	}
 	 	catch(e)
 	 	{
 	 	 	//IE
 			eval('document.all.' + id_line + '.removeNode(true);');
 	 	}
 	}

et voilà un échantillon du HTML qui appelle cette fonction:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<table id="action_immediate" width="100%">
	<tr>
		<td colspan="3">actions immediates</td>
	</tr>
	<tr>
		<td>text</td>
		<td>t_qui</td>
		<td>t_date (dd/mm/yyyy)</td>
		<td><a href="javascript:void(0);" onClick="AddLine('action_immediate', '0', '', '', '');"><img src="new.png" alt="new"></a></td>
	</tr>
</table>

ps: si quelqu'un se demande pkoi ma fonction AddLine() accepte des valeurs en argument c'est parce qu'au chargement de la page je l'appelle avec des valeurs générées par mon code php pour créer les lignes existant déjà.

encore une fois merci beaucoup à mes bienfaiteurs!

**Auteur** · 19/12/2008, 10h58

Code :

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

1
2
3
4
5
6
7
8
9
10
var myCell = myRow.insertCell(-1);
 		myCell.innerHTML += '<input type="hidden" 		   id="' + id_table + '_ref' + id + '" 		name="' + id_table + '_ref[]" 	value="' + ref + '"></input>' + 
		 	 				'<input type="text" class="at" id="' + id_table + '_text' + id + '" 	name="' + id_table + '_text[]" 	value="' + text + '" maxlenght="255"></input>';
 		myCell = myRow.insertCell(-1);
 		myCell.innerHTML += '<input type="text" class="at" id="' + id_table + '_qui' + id + '" 		name="' + id_table + '_qui[]" 	value="' + qui + '" maxlenght="30"></input>';
 		myCell = myRow.insertCell(-1);
 		myCell.innerHTML += '<input type="text" class="at" id="' + id_table + '_date' + id + '" 	name="' + id_table + '_date[]" 	value="' + date + '" maxlenght="10"></input>';
 		myCell = myRow.insertCell(-1);
 		myCell.innerHTML += '<a href="javascript:void(0);" onClick="DeleteLine(\'' + id_table + id + '\');"><img src="{ babInstallPath }skins/ovidentia/images/Puces/delete.png" alt="suppr"></a>';

ouh là

(en bleu ci-dessus)
N'utilise pas innerHTML pour insérer de nouvelles balises (ici <input> et <a>), utilise les fonctions DOM :
- createElement()
- appendChild()
(cf. ce lien).

Par ailleurs une balise input n'a pas de balise fermante, voici la syntaxe :

Code xhtml :

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

1
2
 
<input type="button" value="Cliquez ici" onclick="alert('coucou')" />

Ecris également les événements en minuscules : onclick et pas onClick.

Pour supprimer une ligne, ce n'est pas la fonction remove() mais deleteRow() (cf. le lien que j'ai donné dans le message 3) de l'objet table.

**le_chomeur** · 19/12/2008, 11h09

+1 avec auteur

+1000 pour le dom

**Kyaan** · 19/12/2008, 12h27

pour le deleteRow je veux bien mais je le sort d'où l'index de la ligne? dans mon cas il me semble que ce n'est pas adapté.

Pour le reste, j'en prend note et si j'ai le temps d'y revenir un jour je le ferai mais en attendant je vais laisser tourner ce script qui fonctionne étant donné que je suis overbooké pour encore 1 mois ( et en général on me rajoute du taf avant que j'ai finit ce que j'ai à faire donc... :s )

En tout cas merci pour toutes ces informations c'est très gentil de votre part!

**Auteur** · 19/12/2008, 15h10

Envoyé par Kyaan

pour le deleteRow je veux bien mais je le sort d'où l'index de la ligne? dans mon cas il me semble que ce n'est pas adapté.

bah tu l'as écrit dans le code :

Code :

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

1
2
 
var myRow = document.getElementById(id_table).insertRow(-1);

myRow contient la propriété rowIndex

Dans l'exemple que j'ai donnée regarde le code qui créé une ligne :

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
 
var tableau = document.getElementById('tableau');
  var ligne = tableau.insertRow(-1); // insertion d'une ligne à la fin du tableau
 
  Cell = ligne.insertCell(0); // ajout d'une cellule
  Cell.innerHTML = ligne.rowIndex;  // index de la ligne 
 
  Cell = ligne.insertCell(1); // ajout d'une cellule
  Cell.innerHTML = nom;
 
  Cell = ligne.insertCell(2);  // ajout d'une cellule
  Cell.innerHTML = prenom;
 
  Cell = ligne.insertCell(3); // ajout d'une cellule
 
 // création d'un bouton "supprimer la ligne"
  var bouton = document.createElement("input");
  bouton.type = "button";
  bouton.value = "Supprimer";
 
  bouton.onclick = function(){suppression(ligne)}; // l'objet ligne est transmis à la fonction suppression()
 
  Cell.appendChild(bouton); // ajout du bouton dans la cellule

la fonction de suppression d'une ligne :

Code :

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

1
2
3
4
5
6
7
8
9
 
function suppression(ligne)
{
  // l'objet ligne est le paramètre de la fonction
  // je supprime la ligne ayant pour index rowIndex
  document.getElementById('tableau').deleteRow(ligne.rowIndex);
 
//....... suite du code
}

**BaBeuH** · 22/12/2008, 14h55

Effectivement, il est plus propre d'utiliser DOM pour l'ajout d'élément via javascript, toutefois, j'ai rencontré des problèmes de performances lors de l'ajout "massif" d'élements en DOM (avec IE6 notamment). De plus, ces problèmes s'accentuaient après plusieurs actions successives (5 à 10 sec pour créer des tableaux)... En cherchant sur internet, je suis tombé sur un benchmark comparant les différentes méthodes de création d'éléments sous plusieurs navigateurs :
http://www.quirksmode.org/dom/innerhtml.html

J'ai donc opté pour des méthodes de type innerHTML, et ça fonctionne bien mieux sous IE, et je n'ai pas rencontré de problèmes bloquants jusqu'à présent.

Alors, peut-être est-ce plus propre de passer par du DOM, mais si c'est pour avoir une appli inutilisable...

**Kyaan** · 23/12/2008, 09h32

Interressant comme remarque.

Auteur, juste par curiosité, as-tu déjà rencontré des problèmes de perf dans tes projet utilisant les fonctions dom?

Quoi qu'il en soit dans mon cas je n'ai pas besoin de générer un nombre important d'éléments donc je ne pense pas que l'une ou l'autre des 2 méthodes donne un meilleur résultat (en terme de performances).

J'espère que je trouverai du temps pour faire la modif et je vous tiendrai au courant si c'est le cas...

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

Envoyé par Kyaan

Auteur, juste par curiosité, as-tu déjà rencontré des problèmes de perf dans tes projet utilisant les fonctions dom?

Franchement, je n'ai jamais eu de problèmes de performance.

Cela dit pour qu'un script mette entre 5 et 10 secondes pour générer un ou des tableaux, il y a un sérieux problème d'ergonomie : avec javascript, on ne peut pas se permettre d'ajouter "massivement" des éléments dans une page. Ce n'est pas fait pour ça !!

En plus compte tenu de la durée, cela doit être un sacré tableau !! Quand au fichier HTML généré, il doit être imposant

Envoyé par Kyaan

Quoi qu'il en soit dans mon cas je n'ai pas besoin de générer un nombre important d'éléments donc je ne pense pas que l'une ou l'autre des 2 méthodes donne un meilleur résultat (en terme de performances).

Le problème peut se poser quand tu ajoutes des éléments dans un formulaire avec innerHTML : les données contenues dans ces éléments ne sont pas toujours transmises au serveur.

Et puis si tu fais une recherche dans le forum, tu verras un bon nombre de problèmes liés à l'ajout d'éléments lorsque innerHTML est utilisé. (j'ai vu de ces codes

)

**BaBeuH** · 23/12/2008, 14h32

Envoyé par Auteur

Cela dit pour qu'un script mette entre 5 et 10 secondes pour générer un ou des tableaux, il y a un sérieux problème d'ergonomie : avec javascript, on ne peut pas se permettre d'ajouter "massivement" des éléments dans une page. Ce n'est pas fait pour ça !!

En plus compte tenu de la durée, cela doit être un sacré tableau !! Quand au fichier HTML généré, il doit être imposant

L'application développée est une application de saisie de masse (résultats sportifs, qui pour certaines disciplines peuvent être relativement conséquents). C'est une application qui répond à des besoins bien particuliers.

Nous avons fait le choix d'utiliser javascript pour construire toute l'interface graphique (une bibliothèque a été développée pour construire des éléments de "base", type tableau triable, système d'onglets...etc) pour offrir une interface souple et réactive. Nous n'utilisons aucun formulaire, les validations sont gérées au niveau javascript (contrôle de validité des champs automatiques, puis collecte des données sous forme de "grappes d'objets", et émission de requête au format JSON). Par rapport à la problématique de saisie de masse, nous avons dû faire face à ces problèmes de performance lié au DOM, et l'utilisation d'innerHTML a semblé une solution alternative acceptable.

A titre d'informations, les pages générées par javascript varient entre 200 et 500 ko, ce qui est non négligeable en terme d'échange serveur. L'échange au format JSON diminue nettement la quantité d'informations transmises, et javascript se charge de présenter les données à l'utilisateur.

Est-ce que javascript est adapté pour ce type d'architecture ?
Ce n'est effectivement pas l'objectif initial de javascript, mais les librairies de type ExT Js, Dojo... ne s'en chargent-elles pas ? Construire des éléments "haut niveau" afin d'augmenter l'ergonomie des pages web ?
Il y a surement un juste milieu à trouver entre "all javascript" et "no javascript", je le concède. Nous avons opté pour du "presque tout javascript" et nous n'avons pas regrettons ce choix jusqu'à présent.

Comme je l'ai dit précédemment, ce n'est pas "propre" d'utiliser innerHTML, et il est préférable d'utiliser DOM.
Je n'apporte que mon expérience et une solution par rapport à un cas spécifique. Si d'autres personnes ont rencontré des problèmes similaires et résolu d'une façon différente, je serai ravi d'avoir d'autres avis...

++

[DOM] innerHTML et IE -_-' [Fait]

JavaScript

Discussions similaires

Partager

Partager