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.