Gestion dynamique formulaire

**luffyfr** · 21/09/2012, 11h26

Bonjour à tous,

Je suis en ce moment en train de me former sur jquery en développant une petite application.
Voici mon problème :
J'ai développé un module permettant d'élaborer une série d'étape pour des modules en un bloc et dynamiquement, à savoir :

Code html :

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
<label>Nombre d'étape(s)</label><input type="text" id="nb_etape" name="nb_etape"><br>
	<ul class="" id="ul_etape">
		<li id="etape_1"><label>Etape 1 : </label><input type="text" id="nom_etape_1" name="nom_etape_1"> <input type="checkbox" id="etape_pj_1" name="etape_pj_1"> <input type="checkbox" id="etape_docs_1" name="etape_docs_1">
			<ul id="etape_1_pj">
				<li id="etape_dpj_1"><label>Nombre de pièce jointes pour l'étape 1 : </label><input type="text" id="nb_pj_etape_1" name="nb_pj_etape_1">
					<ul id="ul_pj_etape_1">
						<li id="pj_etape_1_1"><label>Nom PJ 1 : </label><input type="text" id="nom_pj_1_1" name="nom_pj_1_1"></li>
						<li id="pj_etape_1_2"><label>Nom PJ 2 : </label><input type="text" id="nom_pj_1_2" name="nom_pj_1_2"></li>
					</ul>
				</li>
			</ul>
			<ul id="etape_1_doc">
				<li id="etape_doc_1"><label>Nombre de documents pour l'étape 1 : </label><input type="text" id="nb_doc_etape_1" name="nb_doc_etape_1">
					<ul id="ul_doc_etape_1">
						<li id="doc_etape_1_1"><label>Document 1 : </label><input type="file" id="file_doc_1_1" name="file_doc_1_1"></li>
					</ul>
				</li>
			</ul>
		</li>
		<li id="etape_2"><label>Etape 2 : </label><input type="text" id="nom_etape_2" name="nom_etape_2"><input type="checkbox" id="etape_pj_2" name="etape_pj_2"><input type="checkbox" id="etape_docs_2" name="etape_docs_2"></li>
		<li id="etape_3"><label>Etape 3 : </label><input type="text" id="nom_etape_3" name="nom_etape_3"><input type="checkbox" id="etape_pj_3" name="etape_pj_3"><input type="checkbox" id="etape_docs_3" name="etape_docs_3"></li>
		<li id="etape_4"><label>Etape 4 : </label><input type="text" id="nom_etape_4" name="nom_etape_4"><input type="checkbox" id="etape_pj_4" name="etape_pj_4"><input type="checkbox" id="etape_docs_4" name="etape_docs_4"></li>
	</ul>

L'idée, on entre le nombre d'étape, cela va générer la liste des étapes avec une checkbox pour ajouter des pièces jointes (justes leur noms) et une checkbox pour envoyer un document rattaché à l'etape "ul_etape", pour chacun de ses nouveaux elements, on a la possibilité d'en ajouter plusieurs, ce qui génére "ul_pj_etape_1" et "ul_doc_etape_1".

Le problème est que je travaille avec un système d'onglet pour afficher mes modules, de ce fait, "ul_etape" et "nb_etape" ne sont plus unique et mon code ne fonctionne que sur le premier onglet.

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
$('#nb_etape').live('keyup', function()
{
	aff_nb_element('ul_etape', this.value, 'Input')
});
 
$("#ul_etape input").live('keyup', function()
{
	IdInput = $(this).attr('id');
	var regEx=/nb_pj_etape_(.+)/;
	if(regEx.test(IdInput))
	{
		// alert('insertion nb input pour nom pj');
		NumIdLi = IdInput.split(/_/)[3];
		aff_nb_element('etape_dpj_' + NumIdLi, this.value, 'PJ')
	}
	else
	{
		var regEx=/nb_doc_etape_(.+)/;
		if(regEx.test(IdInput))
		{
			// alert('insertion nb input pour nom doc');
			NumIdLi = IdInput.split(/_/)[3];
			aff_nb_element('etape_doc_' + NumIdLi, this.value, 'DOC')
		}
	}
});
 
$("#ul_etape input[type='checkbox']").live('change', function()
{
	// on créé le nouveau UL
	IdChx = $(this).attr('id');
	// verification du type de checkbox cliqué
	var regEx=/etape_pj_(.+)/;
	if(regEx.test(IdChx))
	{
		// alert('chx');
		NumIdLi = IdChx.split(/_/)[2];
		// alert(NumIdLi);
		if($('#etape_pj_'+NumIdLi).is(':checked'))
		{
			// alert('ajout ul etape_pj_'+NumIdLi)
			IdLi = "etape_"+NumIdLi;
			var currentElement = document.getElementById(IdLi);
			var ElementUL = document.createElement('ul');
			ElementUL.id = 'etape_' + NumIdLi + '_pj';
			var ElementLI = document.createElement('li');
			ElementLI.id = 'etape_dpj_' + NumIdLi;
			var ElementLABEL = document.createElement('label');
			var ElementLITN = document.createTextNode("Nombre de pi\350ce jointes pour l\'\351tape " + NumIdLi + " : ");
			var LIElementINPUT = document.createElement('input');
			LIElementINPUT.type = "text";
			LIElementINPUT.id = "nb_pj_etape_"+ NumIdLi;
			LIElementINPUT.name = "nb_pj_etape_"+ NumIdLi;
			ElementLABEL.appendChild(ElementLITN);
			ElementLI.appendChild(ElementLABEL);
			ElementLI.appendChild(LIElementINPUT);
			ElementUL.appendChild(ElementLI);
			currentElement.appendChild(ElementUL);
			// alert(currentElement);
			// alert('ul ajouté');
		}
		else
		{
			// alert('suppression ul etape_'+NumIdLi+'_pj');
			$('#etape_'+NumIdLi+'_pj').remove();
		}
	}
	else
	{
		NumIdLi = IdChx.split(/_/)[2];
		if($('#etape_docs_'+NumIdLi).is(':checked'))
		{
			IdLi = "etape_"+NumIdLi;
			var currentElement = document.getElementById(IdLi);
			var ElementUL = document.createElement('ul');
			ElementUL.id = 'etape_' + NumIdLi + '_doc';
			var ElementLI = document.createElement('li');
			ElementLI.id = 'etape_doc_' + NumIdLi;
			var ElementLABEL = document.createElement('label');
			var ElementLITN = document.createTextNode("Nombre de documents pour l\'\351tape " + NumIdLi + " : ");
			var LIElementINPUT = document.createElement('input');
			LIElementINPUT.type = "text";
			LIElementINPUT.id = "nb_doc_etape_"+ NumIdLi;
			LIElementINPUT.name = "nb_doc_etape_"+ NumIdLi;
			ElementLABEL.appendChild(ElementLITN);
			ElementLI.appendChild(ElementLABEL);
			ElementLI.appendChild(LIElementINPUT);
			ElementUL.appendChild(ElementLI);
			currentElement.appendChild(ElementUL);
		}
		else
		{
			$('#etape_'+NumIdLi+'_doc').remove();
		}
	}
});

Mon idée était donc de renommer "ul_etape" en "ul_etape_32" (de même pour nb_etape) (32 correspondant à l'id en base du module à configurer).
J'ai donc transformer mes codes jquery, le souci vient du fait qu'il me faut trouver l'id de l’onglet actif pour initialiser IdModRefr
j'ai donc créé une fonction permettant de connaitre l'id de l'onglet actif (nomme "item_32" par ex)

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
 
function DetNumIDItem()
{
	var DivChild = document.getElementById('contenu_onglet').childNodes.length;
	for(i=0;i<DivChild;i++)
	{
		nom_child = document.getElementById('contenu_onglet').childNodes[i].id;
		if($('#'+nom_child).css("display") == "block")
		{
			var IdSiteRefr = nom_child.split(/item_([^&]+)/)[1];
			// alert(IdSiteRefr);
			break;
		}
	}
	return IdSiteRefr;
}
 
$('#contenu_onglet').live('click', function()
{
    var IdSiteRefr = DetNumIDItem();
    $("#ul_etape"+IdModRefr+" input[type='checkbox']").live('change', function()
    $('#nb_etape'+IdModRefr).live('keyup', function()
    $("#ul_etape"+IdModRefr+" input").live('keyup', function()
...

Et c'est la que cela déconne, mon code fonctionne, mes champs sont bien générés mais par exemple, $("#ul_etape"+IdModRefr+" input").live('keyup', function() est exécuté plusieurs fois lorsque je modifie le checkbox pour générer / supprimer les UL de PJ ou DOC et ce de façon exponentielle (2 au debut, suppresion, 4, supp, 8, supp....).
est ce que le problème viens du "live" ? j'ai essayer avec "click" mais cela ne fonctionne plus.
J’espère avoir était clair dans mes explications.
Merci d'avance.

**luffyfr** · 21/09/2012, 12h35

Je viens de tester en isolant les 2 premières fonctions :

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
$('#contenu_onglet').live('click', function()
{
	var DivChild = document.getElementById('contenu_onglet').childNodes.length;
	for(i=0;i<DivChild;i++)
	{
		nom_child = document.getElementById('contenu_onglet').childNodes[i].id;
		if($('#'+nom_child).css("display") == "block")
		{
			var IdSiteRefr = nom_child.split(/item_([^&]+)/)[1];
			break;
		}
	}
	// maj_form(IdSiteRefr);
	test(IdSiteRefr);
});
 
function test(IdSiteRefr)
{
	alert('fonction');
	$('#nb_etape_'+IdSiteRefr).live('keyup', function()
	{
		alert('ici');
		aff_nb_element('ul_etape_'+IdSiteRefr, this.value, 'Input')
	});
 
	$("#ul_etape_"+IdSiteRefr+" input[type='checkbox']").live('change', function()
	{
		alert('add chp chx');
		// on créé le nouveau UL
		IdChx = $(this).attr('id');
		// verification du type de checkbox cliqué
		var regEx=/etape_pj_(.+)/;
		if(regEx.test(IdChx))
		{
			// alert('chx');
			NumIdLi = IdChx.split(/_/)[2];
			if($('#etape_pj_'+NumIdLi).is(':checked'))
			{
				IdLi = "etape_"+NumIdLi;
				var currentElement = document.getElementById(IdLi);
				var ElementUL = document.createElement('ul');
				ElementUL.id = 'etape_' + NumIdLi + '_pj';
				var ElementLI = document.createElement('li');
				ElementLI.id = 'etape_dpj_' + NumIdLi;
				var ElementLABEL = document.createElement('label');
				var ElementLITN = document.createTextNode("Nombre de pi\350ce jointes pour l\'\351tape " + NumIdLi + " : ");
				var LIElementINPUT = document.createElement('input');
				LIElementINPUT.type = "text";
				LIElementINPUT.id = "nb_pj_etape_"+ NumIdLi;
				LIElementINPUT.name = "nb_pj_etape_"+ NumIdLi;
				ElementLABEL.appendChild(ElementLITN);
				ElementLI.appendChild(ElementLABEL);
				ElementLI.appendChild(LIElementINPUT);
				ElementUL.appendChild(ElementLI);
				currentElement.appendChild(ElementUL);
			}
			else
			{
				$('#etape_'+NumIdLi+'_pj').remove();
			}
		}
	});
	alert('fin fonction');
}

Il semble exécuter une fois la fonction, les alertes (fonction et fin fonction n'apparaissent qu'une seul fois), mais deux fois la fonction $("#ul_etape_"+IdSiteRefr+" input[type='checkbox']").live('change', function(). Pourquoi, je ne vois pas...

**marcha** · 10/10/2012, 20h30

Salut,

JQuery simplifie beaucoup l'écriture du javascript et il est important de comprendre ce qui se cache derrière .live() (aujourd'hui .on())

Regarde déjà ceci sur les évenements

Puis ceci sur la manière d'attacher les évènement en javascript

Live utilise la remontée des événements et se base sur target pour savoir quel élément du DOM a causé l'évènement.

Ce qui arrive dans ton code c'est que tu ajoute des gestionnaires d'évènement là où ils sont déjà associé avec .live().

Une autre notion qui pourrai te servir c'est d'utiliser la notation $(selecteur, element) qui permet de sélectionner à l'intérieur d'un élement. Cela devrait te permettre d'éviter de faire une numérotation de tes IDs.

Gestion dynamique formulaire

jQuery

Vue hybride

Discussions similaires

Partager

Partager