InnerHTML et Firefox

**syl2095** · 24/04/2009, 19h59

Bonjour,

j'ai un souci pour créer dynamiquement des champs.

avec IE, ça marche nikel mais avec firefox, ça ne marche pas.

Voici le code :

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
function create_champ(){
n++ ;
	//			for (k=0;k<tab_type.length;k++)
		//			{
			//			option += "<option value='"+tab_idtype[k]+"'>"+tab_type[k]+"</option>" ;
			//		}			
 
if(i<1){
	document.getElementById('surface').innerHTML += "<div id='surf_"+i+"' style='display:block'>"+
	"<table align='center' id='tab_module'>"+
		"<tr>"+
			"<td colspan='2'><strong>Surface n°1</strong></td>"+
		"</tr>"+
		"<tr>"+
			"<td id='title'>Niveau</td>"+
			"<td>"+
				"<input type='text' name='niveau_"+i+"' id='niveau_"+i+"' size='20' onfocus='focus_css(this.id)' onblur='blur_css(this.id)' />"+
			"</td>"+
		"</tr>"+
		"<tr>"+
			"<td id='title'>Description</td>"+
			"<td>"+
				"<textarea name='desc_surf_"+i+"' id='desc_surf_"+i+"' cols='40' rows='3' onfocus='focus_css(this.id)' onblur='blur_css(this.id)'></textarea>"+
			"</td>"+
		"</tr>"+
		"<tr>"+
			"<td id='title'>Type</td>"+
			"<td>"+
				"<input type='text' name='type_surf_"+i+"' id='type_surf_"+i+"' size='20' onfocus='focus_css(this.id)' onblur='blur_css(this.id)'>"+
			"</td>"+
		"</tr>"+
		"<tr>"+
			"<td id='title'>Superficie</td>"+
			"<td>"+
				"<input type='hidden' value='"+n+"' name='nb_surf' id='nb_surf' />"+
				"<input type='text' name='superficie_surf_"+i+"' id='superficie_surf_"+i+"' size='20' onfocus='focus_css(this.id)' onblur='blur_css(this.id)'/>"+
			"</td>"+
		"</tr>"+
	"</table>"+
	"<br></div>";
}
else{
 
	document.getElementById('surface').innerHTML += "<div id='surf_"+i+"' style='display:block'>"+
	"<table align='center' id='tab_module'>"+
		"<tr>"+
			"<td colspan='2'><strong>Surface n°"+n+"</strong></td>"+
		"</tr>"+
		"<tr>"+
			"<td id='title'>Niveau</td>"+
			"<td>"+
				"<input type='text' name='niveau_"+i+"' id='niveau_"+i+"' size='20' onfocus='focus_css(this.id)' onblur='blur_css(this.id)' />"+
			"</td>"+
		"</tr>"+
		"<tr>"+
			"<td id='title'>Description</td>"+
			"<td>"+
				"<textarea name='desc_surf_"+i+"' id='desc_surf_"+i+"' cols='40' rows='3' onfocus='focus_css(this.id)' onblur='blur_css(this.id)'></textarea>"+
			"</td>"+
		"</tr>"+
		"<tr>"+
			"<td id='title'>Type</td>"+
			"<td>"+
				"<input type='text' name='type_surf_"+i+"' id='type_surf_"+i+"' size='20' onfocus='focus_css(this.id)' onblur='blur_css(this.id)'>"+
			"</td>"+
		"</tr>"+
		"<tr>"+
			"<td id='title'>Superficie</td>"+
			"<td>"+
				"<input type='text' name='superficie_surf_"+i+"' id='superficie_surf_"+i+"' size='20' onfocus='focus_css(this.id)' onblur='blur_css(this.id)'/>"+
			"</td>"+
		"</tr>"+
	"</table>"+
	"<input type='hidden' value='"+n+"' name='nb_surf' id='nb_surf' />"+
	"<input type='button' value='Supprimer' class='bouton_fiche' onClick='remove_champ("+i+")' />"+
	"<br></div>";
}
i++;
}

Je crée une fois l'element, je remplis les champs et quand je veux ajouter un nouvel element, les champs du premier element se vide.

Pourriez vous m'aider ?

Merci

Sylvain

**Auteur** · 24/04/2009, 22h10

bonjour,

utilise les fonctions DOM pour créer des nouveaux éléments dans ta page et oublie innerHTML.

**syl2095** · 24/04/2009, 22h35

Merci pour ta réponse.

j'y connais rien en DOM.

je devrais utiliser quels types d'element pour que ce soit le même principe?

**syl2095** · 24/04/2009, 23h13

Bon j'avance...

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
var div = document.createElement("surf_"+i) ;
	div.style.display = "block" ;
	div.innerHTML += "<table align='center' id='tab_module'>"+
	"<tr>"+
		"<td colspan='2'><strong>Surface n°"+n+"</strong></td>"+
	"</tr>"+
	"<tr>"+
		"<td id='title'>Niveau</td>"+
		"<td>"+
			"<input type='text' name='niveau_"+i+"' id='niveau_"+i+"' size='20' onfocus='focus_css(this.id)' onblur='blur_css(this.id)' />"+
		"</td>"+
	"</tr>"+
	"<tr>"+
		"<td id='title'>Description</td>"+
		"<td>"+
			"<textarea name='desc_surf_"+i+"' id='desc_surf_"+i+"' cols='40' rows='3' onfocus='focus_css(this.id)' onblur='blur_css(this.id)'></textarea>"+
		"</td>"+
	"</tr>"+
	"<tr>"+
		"<td id='title'>Type</td>"+
		"<td>"+
			"<input type='text' name='type_surf_"+i+"' id='type_surf_"+i+"' size='20' onfocus='focus_css(this.id)' onblur='blur_css(this.id)'>"+
		"</td>"+
	"</tr>"+
	"<tr>"+
		"<td id='title'>Superficie</td>"+
		"<td>"+
			"<input type='text' name='superficie_surf_"+i+"' id='superficie_surf_"+i+"' size='20' onfocus='focus_css(this.id)' onblur='blur_css(this.id)'/>"+
		"</td>"+
	"</tr>"+
"</table>"+
"<input type='hidden' value='"+n+"' name='nb_surf' id='nb_surf' />"+
"<input type='button' value='Supprimer' class='bouton_fiche' onClick='remove_champ("+i+")' />"+
"<br>" ;
 
}
i++ ;
document.getElementById("surface").appendChild(div) ;

j'ai crée le div comme le code l'indique et ça fonctionne bien

ça crée des divs autant que je veux sans perdre les données

maintenant mon souci c'est que je n'arrive pas à supprimer l'un des div...

j'ai essayé avec

Code :

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

1
2
3
4
5
6
7
 
function remove_champ(i)
{				
var parent = document.getElementById("surf_"+i).parentNode;
parent.removeChild(document.getElementById("surf_"+i));
	n-- ;
}

mais il me dit :

Code :

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

1
2
3
Erreur*: document.getElementById("surf_" + i) is null
Fichier Source*: http://192.168.1.4/crm_ai/js/fonctions.js
Ligne*: 429

Quelqu'un peut il m'éclairer ?

Merci

**syl2095** · 24/04/2009, 23h57

bon j'avance sur firefox :

Code :

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

1
2
var div = document.createElement('div') ;
div.setAttribute('id','surf_'+i);

ça a suffi pour resoudre les problemes sur ff mais maintenant j'ai une erreur sur ie !!!

il me met 'non implémenté' !!

help me !!

**syl2095** · 25/04/2009, 00h14

c'est bon, c'est réglé.

Code :

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

1
2
 
var parent = document.getElementById("surf_"+i).parentNode;				parent.removeChild(document.getElementById("surf_"+i));

avec ça pour supprimer les div, ça marche sur les ff et ie.

Merci pour ton aide

**Auteur** · 25/04/2009, 12h03

plusieurs de tes éléments ont le même id (ici "title"). Un id doit être unique ! (ne pas confondre id, name et className)

voilà un code qui utilise le DOM pour ajouter et supprimer des éléments et fonctionnel pour au moins IE et FF :

Code x :

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>

<title></title>

<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />

<meta http-equiv="Content-Language" content="fr" />
 
 
<style type="text/css">
<!--
table, td, tr{
border: 1px #AAAAAA solid;
}
-->
</style> 

<script type="text/javascript">
<!-- 
var i = 0;

function focus_css(idElement)
{
	document.getElementById(idElement).style.backgroundColor = "#AAAAAA";
}

function blur_css(idElement)
{
	document.getElementById(idElement).style.backgroundColor = "";
}

function remove_champ(divSuppr)
{
	document.body.removeChild(divSuppr);// les div sont dans le body du document
}

function creationElement()
{

	var monTableau;
	var ligne, cellule;
	var elmt;
	var monDiv = document.createElement("div");

	monDiv.style.display = "block";
	monDiv.id = "surf_"+i;

	monTableau = document.createElement("table");

	// ligne 0
	ligne = monTableau.insertRow(-1);
	cellule = ligne.insertCell(0);
	cellule.colSpan = 2;
	cellule.innerHTML = "Surface n°"+i;
	cellule.style.textAlign = "center";

	// ligne 1
	ligne = monTableau.insertRow(-1);
	cellule = ligne.insertCell(0);
	cellule.innerHTML = "Niveau";
	
	cellule = ligne.insertCell(1);
	try
	{
		// si une exception est levée, le contenu du catch est exécuté
		elmt = document.createElement("<input name='niveau_'" + i + ">");
	}
	catch(erreur)
	{
		elmt = document.createElement("input");
		elmt.name = "niveau_" + i; 
	}
	elmt.type = "text";
	elmt.id = "niveau_"+i;
	elmt.size = "20";
	elmt.onfocus = function(){focus_css(this.id)};
	elmt.onblur = function(){blur_css(this.id)};
	cellule.appendChild(elmt);
	
	// ligne 2
	ligne = monTableau.insertRow(-1);
	cellule = ligne.insertCell(0);
	cellule.innerHTML = "Description";

	cellule = ligne.insertCell(1);
	try
	{
		// si une exception est levée, le contenu du catch est exécuté
		elmt = document.createElement("<textarea name='desc_surf_'" + i + ">");
	}
	catch(erreur)
	{
		elmt = document.createElement("textarea");
		elmt.name = "desc_surf_" + i; 
	}
	elmt.id = "desc_surf_"+i;
	elmt.cols = "40";
	elmt.rows = "3";
	elmt.onfocus = function(){focus_css(this.id)};
	elmt.onblur = function(){blur_css(this.id)};
	cellule.appendChild(elmt);
	
	
	// ligne 3
	ligne = monTableau.insertRow(-1);
	cellule = ligne.insertCell(0);
	cellule.innerHTML = "Type";
	
	cellule = ligne.insertCell(1);
	try
	{
		// si une exception est levée, le contenu du catch est exécuté
		elmt = document.createElement("<input name='type_surf_'" + i + ">");
	}
	catch(erreur)
	{
		elmt = document.createElement("input");
		elmt.name = "type_surf_" + i; 
	}
	elmt.type = "text";
	elmt.id = "type_surf_"+i;
	elmt.size = "20";
	elmt.onfocus = function(){focus_css(this.id)};
	elmt.onblur = function(){blur_css(this.id)};
	cellule.appendChild(elmt);
	

	// ligne 4
	ligne = monTableau.insertRow(-1);
	cellule = ligne.insertCell(0);
	cellule.innerHTML = "Superficie";
	
	cellule = ligne.insertCell(1);
	try
	{
		// si une exception est levée, le contenu du catch est exécuté
		elmt = document.createElement("<input name='superficie_surf_'" + i + ">");
	}
	catch(erreur)
	{
		elmt = document.createElement("input");
		elmt.name = "superficie_surf_" + i; 
	}
	elmt.type = "text";
	elmt.id = "superficie_surf_"+i;
	elmt.size = "20";
	elmt.onfocus = function(){focus_css(this.id)};
	elmt.onblur = function(){blur_css(this.id)};
	cellule.appendChild(elmt);	
	
	// ajout du tableau dans le div
	monDiv.appendChild(monTableau);
	
	// creation du champ hidden
	try
	{
		// si une exception est levée, le contenu du catch est exécuté
		elmt = document.createElement("<input name='nb_surf'>");
	}
	catch(erreur)
	{
		elmt = document.createElement("input");
		elmt.name = "nb_surf";
	}
	elmt.type = "hidden";
	elmt.id = "nb_surf";
	monDiv.appendChild(elmt);
	
	// creation du bouton supprimer
	try
	{
		// si une exception est levée, le contenu du catch est exécuté
		elmt = document.createElement("<input name='nb_surf'>");
	}
	catch(erreur)
	{
		elmt = document.createElement("input");
		elmt.name = "nb_surf";
	}
	elmt.type = "button";
	elmt.value = "Supprimer";
	elmt.className = "bouton_fiche";
	elmt.id = "nb_surf";
	elmt.onclick = function(){remove_champ(monDiv)}
	monDiv.appendChild(elmt);
	
	monDiv.appendChild(document.createElement("br"));
	monDiv.appendChild(document.createElement("br"));
	monDiv.appendChild(document.createElement("br"));
	
	// ajout du div dans la page
	document.body.appendChild(monDiv);
	
	i++;

}

//-->
</script>
 
</head>
 
 
<body onload="creationElement()">
<div><input type="button" value="Ajouter un élément" onclick="creationElement()" /></div>



</body>
</html>

à toi de le compléter ou de le modifier selon tes envies.

Pour les try{}...catch{} présents dans le code cf. :
http://www.developpez.net/forums/d62...t-cree-script/

**syl2095** · 30/04/2009, 15h40

merci pour le code, c'est effectivement plus clair et propre.

je peux m'appuyer sur ce code à l'avenir.

merci à toi

++

**projetM** · 04/05/2009, 17h34

Bonjour Auteur,

Merci pour ton code, je l'ai intégré dans ma page et ça marche parfaitement sur FF, mais malheureusement ça ne marche pas sur IE.
Je ne sais pas d'où vient le problème, peut être à cause des différents divs imbriqués puisque j'intègre cette partie dans un div global, mais je ne sais pas toujours comment corriger la faute.

Si quelqu'un d'entre vous a une idée je suis preneur.

**Auteur** · 06/05/2009, 14h57

Envoyé par projetM

Bonjour Auteur,

Merci pour ton code, je l'ai intégré dans ma page et ça marche parfaitement sur FF, mais malheureusement ça ne marche pas sur IE.
Je ne sais pas d'où vient le problème, peut être à cause des différents divs imbriqués puisque j'intègre cette partie dans un div global, mais je ne sais pas toujours comment corriger la faute.

Si quelqu'un d'entre vous a une idée je suis preneur.

Un bout de code serait le bienvenu, ma boule de cristal est tombée en panne ce matin