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.
