Interagir sur élément crée dynamiquement [Résolu]

derzy971 · 15/03/2010, 21h20

bonjour,

je débute en javascript,
j'aimerais crée un organigramme dynamiquement avec enregistrement dans une BDD (pour le moment, je suis au début), je sais qu'il existe des applications pour cela, mais ça me permettra de mieux saisir les notions du javascript si c'est moi même qui le fait.

J'aimerais savoir comment interagir sur des éléments que j'ai crée dynamiquement en javascript.

voila mon code pour mieux comprendre :

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
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
 
<html>
<head></head>
<body>
 
<?php require_once 'connect.inc.php'; ?>
 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<script type="text/javascript">
<!--
function affiche()
{
	alert('hello');
	var node = document.getElementById("formR");
var parent = node.parentNode;
parent.removeChild(node);
 
}
 
function sup_form()
{
	var node = document.getElementById("formR");
		if(node!=undefined)
		{
			var parent = node.parentNode;
			parent.removeChild(node);
		}
}
	/*fonction permettant de détecter un clic droit*/
	function droite(e)
	{
		if ((!document.all && e.which == 3) || (document.all && event.button==2))
		{
			createForm();
		}
		return true;
	}
 
	/*fonction permettant de faire du drag'n drop*/
 	function drag() 
	{
		$(".draggable").draggable();
	}
 
	/*fonction permettant de créer un cadre ou div
	avec du texte passé en parametre*/
	function create(arg,arg2)
	{
		sup_form();
		var cadre=document.createElement('div');
		document.body.appendChild(cadre);
		cadre.setAttribute("class","draggable");
		//cadre.setAttribute("style","background-color:red;");
 
		var serv=document.createElement('p');
		var text_serv=document.createTextNode(arg);
		serv.appendChild(text_serv);
 
		var resp=document.createElement('p');
		var text_resp=document.createTextNode(arg2);
		resp.appendChild(text_resp);
 
		cadre.appendChild(serv);
		cadre.appendChild(text_resp);
		drag();
 
		if(document.all) cadre.attachEvent("ondblclick",createForm);
		else cadre.addEventListener("dblclick",createForm,true);
 
	}
 
	$(function() 
	{
		$(".draggable").draggable();
	}
	);	
 
 
function createForm()
{
	var form=document.createElement("form");
	document.body.appendChild(form);
	form.setAttribute("style","background:#60B7EC;width:150px;");
	form.setAttribute("id","formR");
	form.setAttribute("action","test.php");
 
	var input=document.createElement("input");
	input.setAttribute("type","text");
	input.setAttribute("name","service");
	var nom = document.createTextNode("Nom du service");
    var label = document.createElement("label");
    label.appendChild(nom);
    label.appendChild(input);
	form.appendChild(label);
 
	var input2=document.createElement("input");
	input2.setAttribute("type","text");
	input2.setAttribute("name","responsable");
	var nom2 = document.createTextNode("Nom du responsable");
    var label2 = document.createElement("label");
    label2.appendChild(nom2);
	label2.appendChild(input2);
	form.appendChild(label2);
 
	var color=document.createElement("input");
	color.setAttribute("type","text");
	color.setAttribute("name","color");
	color.setAttribute("size","5");
	var nom3 = document.createTextNode("Couleur du cadre");
	var label3=document.createElement("label");
    label3.appendChild(nom3);
	label3.appendChild(color);
	form.appendChild(label3);
 
	var img=document.createElement("img");
	img.setAttribute("src","img/add.png");
	img.setAttribute("title","ajouter");
	form.appendChild(img);
	if(document.all) img.attachEvent("onclick",function(){create(document.forms["formR"].service.value,document.forms["formR"].responsable.value);});
	else img.addEventListener("click",function(){create(document.forms["formR"].service.value,document.forms["formR"].responsable.value);},true);
 
	var img2=document.createElement("img");
	img2.setAttribute("src","img/delete.png");
	img2.setAttribute("title","supprimer");
	form.appendChild(img2);
 
	var img3=document.createElement("img");
	img3.setAttribute("src","img/edit.png");
	img3.setAttribute("title","editer");
	if(document.all) img3.attachEvent("onclick",affiche);
	else img3.addEventListener("click",affiche,true);
	form.appendChild(img3);
 
 
 
	/*var lien=document.createElement("a");
	lien.setAttribute("href","#");
	if(document.all) lien.attachEvent("onclick",function(){document.forms.test.submit();});
	else lien.addEventListener("click",function(){document.forms.test.submit();},true);
	var image=document.createElement("img");
	image.setAttribute("src","img/delete.png");
	lien.appendChild(image);
	form.appendChild(lien);*/
 
	var node = document.getElementById("start");
	if(node!=undefined)
	{
		var parent = node.parentNode;
		parent.removeChild(node);
	}
}
 
//-->
</script>
 
<input type="button" value="Start" id="start" onclick="createForm()" />
 
<?php 
/*if($_POST['responsable']!=NULL)
	echo 'moi';*/
?>
 
</body>
</html>

J'aimerais pouvoir compter le nombre de div (avec la class draggable) déjà crée, pour pouvoir donner un nom à la div du genre cadre1, cadre2, etc...
Je souhaiterais également pouvoir modifier la couleur de fond d'une div mais pour cela, il faut connaitre son id et dans l'état actuel ce n'est pas possible

PS 1: veuillez m'excuser si ce sujet a déjà été traité, j'ai cherché sur le forum sans succès

PS 2 : je pense qu'il faut utiliser document.getElementsByTagName('div').length mais je ne suis pas sur que sa fonctionne avec les éléments crées en js

Merci d'avance

derzy971 · 15/03/2010, 21h56

j'ai quelque peu modifié mon code
mais je ne suis pas sur que l'id est renseigné
pour le changement de couleur, je ne pense que ce soit le mieux car par la suite j'aimerais pouvoir donné une taille à la div, or là je ne peux mettre qu'un attribute style, et je ne peux pas mettre plusieurs style à la suite

mon code modifié :

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
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
 
<html>
<head></head>
<body>
<?php require_once 'connect.inc.php'; ?>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<script type="text/javascript">
<!--
function affiche()
{
	alert('hello');
	var node = document.getElementById("formR");
var parent = node.parentNode;
parent.removeChild(node);
 
}
 
function sup_form()
{
	var node = document.getElementById("formR");
		if(node!=undefined)
		{
			var parent = node.parentNode;
			parent.removeChild(node);
		}
}
	/*fonction permettant de détecter un clic droit*/
	function droite(e)
	{
		if ((!document.all && e.which == 3) || (document.all && event.button==2))
		{
			createForm();
		}
		return true;
	}
 
	/*fonction permettant de faire du drag'n drop*/
 	function drag() 
	{
		$(".draggable").draggable();
	}
 
	/*fonction permettant de créer un cadre ou div
	avec du texte passé en parametre*/
	function create(arg,arg2,color)
	{
		sup_form();
		var cadre=document.createElement('div');
		document.body.appendChild(cadre);
		cadre.setAttribute("class","draggable");
		var nb=document.getElementsByTagName('div').length;
		cadre.setAttribute("style","background-color:"+color);
		cadre.setAttribute("id","cadre"+nb);
 
 
		var serv=document.createElement('p');
		var text_serv=document.createTextNode(arg);
		serv.appendChild(text_serv);
 
		var resp=document.createElement('p');
		var text_resp=document.createTextNode(arg2);
		resp.appendChild(text_resp);
 
		cadre.appendChild(serv);
		cadre.appendChild(text_resp);
		drag();
 
		if(document.all) cadre.attachEvent("ondblclick",createForm);
		else cadre.addEventListener("dblclick",createForm,true);
 
	}
 
	$(function() 
	{
		$(".draggable").draggable();
	}
	);	
 
 
function createForm()
{
	var form=document.createElement("form");
	document.body.appendChild(form);
	form.setAttribute("style","background:#60B7EC;width:150px;");
	form.setAttribute("id","formR");
	form.setAttribute("action","test.php");
 
	var input=document.createElement("input");
	input.setAttribute("type","text");
	input.setAttribute("name","service");
	var nom = document.createTextNode("Nom du service");
    var label = document.createElement("label");
    label.appendChild(nom);
    label.appendChild(input);
	form.appendChild(label);
 
	var input2=document.createElement("input");
	input2.setAttribute("type","text");
	input2.setAttribute("name","responsable");
	var nom2 = document.createTextNode("Nom du responsable");
    var label2 = document.createElement("label");
    label2.appendChild(nom2);
	label2.appendChild(input2);
	form.appendChild(label2);
 
	var color=document.createElement("input");
	color.setAttribute("type","text");
	color.setAttribute("name","color");
	color.setAttribute("size","5");
	var nom3 = document.createTextNode("Couleur du cadre");
	var label3=document.createElement("label");
    label3.appendChild(nom3);
	label3.appendChild(color);
	form.appendChild(label3);
 
	var img=document.createElement("img");
	img.setAttribute("src","img/add.png");
	img.setAttribute("title","ajouter");
	form.appendChild(img);
	if(document.all) img.attachEvent("onclick",function(){create(document.forms["formR"].service.value,document.forms["formR"].responsable.value,document.forms["formR"].color.value);});
	else img.addEventListener("click",function(){create(document.forms["formR"].service.value,document.forms["formR"].responsable.value,document.forms["formR"].color.value);},true);
 
	var img2=document.createElement("img");
	img2.setAttribute("src","img/delete.png");
	img2.setAttribute("title","supprimer");
	form.appendChild(img2);
 
	var img3=document.createElement("img");
	img3.setAttribute("src","img/edit.png");
	img3.setAttribute("title","editer");
	if(document.all) img3.attachEvent("onclick",affiche);
	else img3.addEventListener("click",affiche,true);
	form.appendChild(img3);
 
 
 
	/*var lien=document.createElement("a");
	lien.setAttribute("href","#");
	if(document.all) lien.attachEvent("onclick",function(){document.forms.test.submit();});
	else lien.addEventListener("click",function(){document.forms.test.submit();},true);
	var image=document.createElement("img");
	image.setAttribute("src","img/delete.png");
	lien.appendChild(image);
	form.appendChild(lien);*/
 
	var node = document.getElementById("start");
	if(node!=undefined)
	{
		var parent = node.parentNode;
		parent.removeChild(node);
	}
}
 
//-->
</script>
 
<input type="button" value="Start" id="start" onclick="createForm()" />
 
<?php 
/*if($_POST['responsable']!=NULL)
	echo 'moi';*/
?>
 
</body>
</html>

vous remercie par avance pour votre aide

vermine · 16/03/2010, 08h00

Bonjour,

Pour les styles, vous pouvez les attribuer ainsi:

Code :

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

1
2
 
cadre["style"].cssText = "background-color:#336666; font-family:verdana";

Vous pouvez donc en mettre autant que vous voulez, séparés par un point-virgule. Dans mon exemple, j'ai mis une couleur non nommée, mais vous pouvez très bien avoir:

Code :

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

1
2
 
background-color:green;

Ayez conscience que vous ajoutez directement l'élément après l'avoir crée:

Code :

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

1
2
 
document.body.appendChild(cadre);

et donc avant de lui avoir ajouté les styles et attributs. Pourquoi pas. Ce n'est pas un problème. Mais alors lorsque vous faites votre comptage de div, il récupère effectivement celui que vous venez de créer.
Ca fonctionne, je voulais juste souligner le fait que certains ajoutent les attributs avant de placer l'élément dans le document.

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email