Gestion dynamique formulaire
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:
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:
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:
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.
