Question d'incrémentation en JavaScript/jQuery
Bonjour,
Je voudrais vous demander de l'aide car je bloque sur un problème (et je suis pas très doué en front). En gros, j'ai un petit code HTML qui génère un `data-prototype` tel que :
Code:
1
2
3
4
5
|
<div class="row">
<div id="familyMembersList" data-prototype="{{ form_widget(form.childsFamily.vars.prototype)|e('html_attr') }}">
</div>
</div> |
Le `data-prototype` généré ressemble à ceci :
Code:
1
2
3
4
5
6
7
8
9
10
| <div class="row">
<div id="familyMembersList" data-prototype="
...
<div id="addressList" data-prototype="">...</div>
<div id="mediasList" data-prototype="">...</div>
...
">
<p class="centered"><a href="#" class="add_fmember_link">Add family member</a></p>
</div>
</div> |
Ensuite j'ai 3 fichiers JS où chacun me permet d'ajouter grâce au `data-prototype` un membre de famille, une adresse et un moyen de contact. Le problème est que je n'arrive pas à les assembler pour que je puisse ajouter un membre de famille et lui ajouter des adresses et des moyens de contact :(
Voici le code des 3 fichiers :
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
| var familyCollectionHolder;
// Set up an "add address" link
var addFMemberLink = $('<a href="#" class="add_fmember_link">Add family member</a>');
var newFamilyLinkP = $('<p class="centered"></p>').append(addFMemberLink);
function addFmemberForm(familyCollectionHolder, newFamilyLinkP){
// Get the data prototype
var prototype = familyCollectionHolder.data('prototype');
// get the new index
var index = familyCollectionHolder.data('index');
// Replace '__name__' in the prototype's HTML
//instead be a number based on how many items we have
var newForm = prototype.replace(/__name__/g, index);
// Increase the index with one for the new item
familyCollectionHolder.data('index', index+1);
//Display the form in the page nan li, before the "add address" link
var newFormP = $('<div class="one-fmember"></div>').append(newForm);
newFamilyLinkP.before(newFormP);
addFMemberDeleteLink(newFormP);
}
function addFMemberDeleteLink(fmemberFormP)
{
var removeFormP = $('<p class="centered"><a href="#" style="color:red">Delete member</a></p>');
fmemberFormP.append(removeFormP);
removeFormP.on('click', function(e){
e.preventDefault();
fmemberFormP.remove();
})
}
function handleFcData(familyCollectionHolder,newFamilyLinkP)
{
// Get the div that holds the collection of addresses
familyCollectionHolder = $('div#familyMembersList');
// add a delete link to all of the existensing forms
familyCollectionHolder.find('div.one-fmember').each(function(){
addFMemberDeleteLink($(this));
});
// add the "add address" anchor
familyCollectionHolder.append(newFamilyLinkP);
// Count the current form inputs
// use that as the new index when inserting a new item
familyCollectionHolder.data('index', familyCollectionHolder.find(':input').length);
return familyCollectionHolder;
}
jQuery(document).ready(function(){
familyCollectionHolder = handleFcData(familyCollectionHolder, newFamilyLinkP);
addFMemberLink.on('click',function(e)
{
// Prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new address form
addFmemberForm(familyCollectionHolder, newFamilyLinkP);
})
}); |
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
| var collectionHolder;
// Set up an "add address" link
var addAddressLink = $('<a href="#" class="add_address_link">Add address</a>');
var newLinkP = $('<p class="centered"></p>').append(addAddressLink);
function addAddressForm(collectionHolder, newLinkP){
// Get the data prototype
var prototype = collectionHolder.data('prototype');
// get the new index
var index = collectionHolder.data('index');
// Replace '__name__' in the prototype's HTML
//instead be a number based on how many items we have
var newForm = prototype.replace(/__name__/g, index);
// Increase the index with one for the new item
collectionHolder.data('index', index+1);
//Display the form in the page nan li, before the "add address" link
var newFormP = $('<div class="one-address"></div>').append(newForm);
newLinkP.before(newFormP);
addAddressDeleteLink(newFormP);
}
function addAddressDeleteLink(AddressFormP)
{
var removeForm = $('<p class="centered"><a href="#" style="color:red">Delete Address</a></p>');
AddressFormP.append(removeForm);
removeForm.on('click', function(e){
e.preventDefault();
AddressFormP.remove();
});
}
function handleAcData(collectionHolder,newLinkP)
{
// Get the div that holds the collection of addresses
collectionHolder = $('div#addressList');
// add the "add address" anchor
collectionHolder.append(newLinkP);
// add a delete link to all of the existing media form elements
collectionHolder.find('div#one-address').each(function(){
addAddressDeleteLink($(this))
});
// Count the current form inputs
// use that as the new index when inserting a new item
collectionHolder.data('index', collectionHolder.find(':input').length);
return collectionHolder;
}
jQuery(document).ready(function(){
collectionHolder = handleAcData(collectionHolder, newLinkP);
addAddressLink.on('click', function(e)
{
// Prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new address form
addAddressForm(collectionHolder, newLinkP);
})
}); |
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
| var collectionHolder2;
// Set up an "add address" link
var addMediaLink = $('<a href="#" class="add_media_link">Add Contact mean</a>');
var newLinkP2 = $('<p class="centered"></p>').append(addMediaLink);
function addMediaForm(collectionHolder, newLinkP2){
// Get the data prototype
var prototype = collectionHolder.data('prototype');
// get the new index
var index = collectionHolder.data('index');
// Replace '__name__' in the prototype's HTML
//instead be a number based on how many items we have
var newForm = prototype.replace(/__name__/g, index);
// Increase the index with one for the new item
collectionHolder.data('index', index+1);
//Display the form in the page nan li, before the "add address" link
var newFormP = $('<div class="one-media"></div>').append(newForm);
newLinkP2.before(newFormP);
addMediaDeleteLink(newFormP);
}
function addMediaDeleteLink(mediaFormP)
{
var removeForm = $('<p class="centered"><a href="#" style="color:red">Delete Media</a></p>');
mediaFormP.append(removeForm);
removeForm.on('click', function(e){
e.preventDefault();
mediaFormP.remove();
});
}
function handleMcData(collectionHolder2,newLinkP2)
{
// Get the div that holds the collection of addresses
collectionHolder2 = $('div#mediasList');
// add the "add address" anchor
collectionHolder2.append(newLinkP2);
// add a delete link to all of the existing media form elements
collectionHolder2.find('div#one-media').each(function(){
addMediaDeleteLink($(this))
});
// Count the current form inputs
// use that as the new index when inserting a new item
collectionHolder2.data('index', collectionHolder2.find(':input').length);
return collectionHolder2;
}
jQuery(document).ready(function(){
collectionHolder2 = handleMcData(collectionHolder2, newLinkP2);
addMediaLink.on('click', function(e)
{
// Prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new address form
addMediaForm(collectionHolder2, newLinkP2);
})
}); |
Ces codes font exactement la même chose pour des "collections d'objets" différents. J'ai réussi a avoir l'effet visuel désiré de deux méthodes
1) J'ai fait appel aux fonctions d'ajout d'adresse et de moyen de contact après le click sur 'ajouter un membre de famille'
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
| jQuery(document).ready(function(){
familyCollectionHolder = handleFcData(familyCollectionHolder, newFamilyLinkP);
addFMemberLink.on('click',function(e)
{
// Prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new address form
addFmemberForm(familyCollectionHolder, newFamilyLinkP);
var collectionHolder2;
// Set up an "add address" link
var addMediaLink = $('<a href="#" class="add_media_link">Add Contact mean</a>');
var newLinkP2 = $('<p class="centered"></p>').append(addMediaLink);
collectionHolder2 = handleMcData(collectionHolder2, newLinkP2);
addMediaLink.on('click', function(e)
{
// Prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new address form
addMediaForm(collectionHolder2, newLinkP2);
});
var collectionHolder;
// Set up an "add address" link
var addAddressLink = $('<a href="#" class="add_address_link">Add address</a>');
var newLinkP = $('<p class="centered"></p>').append(addAddressLink);
collectionHolder = handleAcData(collectionHolder, newLinkP);
addAddressLink.on('click', function(e)
{
// Prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new address form
addAddressForm(collectionHolder, newLinkP);
})
})
}); |
2)j'ai utilisé la propagation d'événements tq :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| jQuery(document).ready(function(){
familyCollectionHolder = handleFcData(familyCollectionHolder, newFamilyLinkP);
addFMemberLink.on('click',function(e)
{
// Prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new address form
addFmemberForm(familyCollectionHolder, newFamilyLinkP);
});
});
$(document).on('click',addAddressLink,function(e){
e.preventDefault();
collectionHolder = handleAcData(collectionHolder, newLinkP);
addAddressForm(collectionHolder, newLinkP);
}); |
Le problème est que dans les deux cas l'index des adresses et des moyens de contact ne s'incrémente pas, j'ai donc l'effet visuel mais pour un membre de famille donné si j'ai deux adresses ils auront le même identifiant (et donc mon application ne sauvegarde que la dernière adresse et le dernier moyen de contact....)
Alors SVP, aidez moi a assembler ces 3 fichiers.
