[DOM] Formulaire n'apparaît pas

Version imprimable

je vous propose une maquette pour refléter la situation qui me cause soucis.

L'appel à la fonction Ajax('f', 'status') devrait inserer dans la ligne du tableau (<tr id=f>) le formulaire avec innerHTML.
Si les balises de formulaire sont commentées tout va bien, si elles sont décommentées le formulaire ne s'affiche plus.

Quelque chose doit m'échapper :?. Merci d'avance.

Voici la page qui appel le code Ajax
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <div id=status>Attente Ajax</div> <table border=1> <tr id=f> </tr> <tr> <td><a href=# onclick="Ajax('f', 'status');">Affiche form</a></td> <td>Ligne 2</td> </tr> </table>
Voici le code appelé
Code:

1 2 3 4 5 6 7 8  <td class=tdnew> <input type=submit value="Ok"> </td> <td class=tdnew> <input type=text name=mot> </td> 

27/10/2008, 14h52
E.Bzz

Bonjour,

Citation:

Envoyé par riete

Quelque chose doit m'échapper :?.

la modification (ou la création) d'un formulaire à l'aide d'innerHTML n'est pas possible. L'intégration/modification du form dans la structure du document ne se fait pas correctement.

Il faut passer par les instructions DOM ....

A+
27/10/2008, 16h31
riete

Merci, c'est bien ce que je craignais 8O
J'ai commencé à ma faire une batterie de function pour créer ligne, cellule en fonction de la position du click.

Est ce que cela signifie que je suis obligé d'utiliser document.createElement('form') ?
Puis pour créer chacun des éléments du formulaire dois je procéder la même façon (ce qui est très "verbeux").
Ou puis je avoir recourt aux functions du style InsertInputText()...

A+
27/10/2008, 16h33
SpaceFrog

j'ai proposé un petite librairie dans les contributions a cet effet ...
27/10/2008, 17h09
riete

Citation:

Envoyé par SpaceFrog

j'ai proposé un petite librairie dans les contributions a cet effet ...

Peux tu m'aider à la trouver, j'ai l'impression de chercher une aiguille dans une botte de foin (ou alors je n'ai pas la bonne méthode).
Je continue en parallèle ma formation à cette technique en même temps ;)
Merci
27/10/2008, 17h12
SpaceFrog

http://www.developpez.net/forums/d53...ynamique-form/

Merci pour le lien, mais je dois avouer qu'au stade ou j'en suis dans la compréhension du mécanisme, il vaut mieux que je procède étapes par étapes.
Je décortique le code de l'exemple ce qui m'apprends beaucoup de choses, en particulier l'utilisation du/des HasH que je ne connaissais absolument pas.

Au risque de me faire taper dessus :aie: je vais poser une question:
Pourquoi ne pas utiliser une fonction de ce type dans laquelle tu intègre un switch(HasH) comme tu là fait. Il me semble que celle-ci a l'avantage de fonctionner sur IE et FF.
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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>deleteCell</title> <script type="text/javascript" language="javascript" charset="iso-8859-1"> function add_obj(obj){ p = document.getElementById(obj); p.innerHTML =''; tnode = document.createTextNode('Radio1 '); p.appendChild(tnode); // try pour IE et catch pour FF try{ new_Element = document.createElement('<input type="radio" name="myrad" checked />'); }catch(err){ new_Element = document.createElement('input'); } new_Element.setAttribute('type','radio'); new_Element.setAttribute('name','myrad'); new_Element.id = 'rad1'; new_Element.setAttribute('checked','checked'); new_Element.value = '1'; p.appendChild(new_Element); } </script> </head> <body bgcolor="#CCCCCC"> <input type="button" value="build" onclick="add_obj('myp');"> <p id=myp></p> </body> </html>

28/10/2008, 11h27
SpaceFrog

justement le problème se pose pour le name que tu ne peux pas attribuer de façon crossbrowser:

Code:

new_Element.setAttribute('name','myrad');

d'ou la nécessité de distinguer deux syntaxes d'attribution du name comme expliqué dans l'article

Citation:

Envoyé par SpaceFrog

justement le problème se pose pour le name que tu ne peux pas attribuer de façon crossbrowser:

Code:

new_Element.setAttribute('name','myrad');

d'ou la nécessité de distinguer deux syntaxes d'attribution du name comme expliqué dans l'article

Je ne suis pas certain que nous nous soyons bien compris. Il me semble que le code que j'ai proposé apporte une réponse à cette question.

Question subsidiaire: Pourquoi dans le code qui suit, les elements radio et text sont-ils inséré dans le body et non dans le formulaire comme demandé ?

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
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
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Make form</title>
 
</head>
 
<body bgcolor="#CCCCCC">
	<input type="button" value="add form" onclick="add_form('myp1');">
	<input type="button" id=addradio value="add radio" disabled="true" onclick="add_radio('form1');">
	<input type="button" id=addtext value="add text" disabled="true" onclick="add_text('form1');">
	<p id=myp1></p>
</body>
<script type="text/javascript" language="javascript" charset="iso-8859-1">
		// ----------------------
		// Ajout form
		// ----------------------
		function add_form(obj){
 
			p = document.getElementById(obj);
 
			// try pour IE et catch pour FF
			try{
				new_Element = document.createElement('<form />');
			}catch(err){
				new_Element = document.createElement('form');
			}
 
			new_Element.setAttribute('method','post');
			new_Element.setAttribute('action','');
			new_Element.id = 'form1';
 
			p.appendChild(new_Element);
 
			// Activation de boutons
			document.getElementById("addradio").disabled=false;
			document.getElementById("addtext").disabled=false;
		}
 
		// ----------------------
		// Ajout radio
		// ----------------------
		function add_radio(obj){
 
			f = document.getElementById(obj);
 
			tnode = document.createTextNode('Radio1 ');
			f.appendChild(tnode);
 
			// try pour IE et catch pour FF
			try{
				new_Element = document.createElement('<input type="radio" name="myrad" checked />');
			}catch(err){
				new_Element = document.createElement('input');
			}
 
			new_Element.setAttribute('type','radio');
			new_Element.setAttribute('name','myrad');
			new_Element.id = 'rad1';
			new_Element.setAttribute('checked','checked');
			new_Element.value = '1';
 
			f.appendChild(new_Element);
		}
 
		// ----------------------
		// Ajout Text
		// ----------------------
		function add_text(obj){
 
			f = document.getElementById(obj);
 
			tnode = document.createTextNode('MonTexte ');
			f.appendChild(tnode);
 
			// try pour IE et catch pour FF
			try{
				new_Element = document.createElement('<input type="text" name="mytext" />');
			}catch(err){
				new_Element = document.createElement('input');
			}
 
			new_Element.setAttribute('type','text');
			new_Element.setAttribute('name','mytext');
			new_Element.id = 'text1';
			new_Element.value = 'Rien';
 
			f.appendChild(new_Element);
		}
	</script>
</html>

28/10/2008, 12h05
SpaceFrog

le switch est moins gourmand que le try catch mais c'est une autre façon de faire ...
28/10/2008, 14h51
riete

Le code ci-dessus fonctionne très bien.:roll:
Il faut que j'arrête le rouge le matin, à moins que ce soit les 'Hash' qui aient un effet retard :D

Question soldée merci