Discussion :

[PolkovnikMedved]

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 :

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

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 :

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

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 :

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
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 :

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
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 :

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
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 :

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
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 :

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
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.