InnerHTML et Firefox

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

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, 21h10

bonjour,

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

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

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, 22h13

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, 22h57

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** · 24/04/2009, 23h14

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

InnerHTML et Firefox

JavaScript

Vue hybride

Discussions similaires

Partager

Partager