[2.x] Javascript pour collection dans une collection

Hello,

voilà ça fait quelques jours que je bloque sur un problème pour la Javascript d'une collection dans une autre collection.

J'ai essayé de m'aider de quelques posts par ci par là et dernièrement je suis tombé sur ça qui avait l'air d'être parfaitement ce qu'il me faut...

J'ai une entité Application et son form :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('servLiens', 'collection', array(
            'label' => ' ',
            'type' => new LienAppliServType(),
            'allow_add' => true,
            'allow_delete' => true,
            'by_reference' =>false,
            'prototype' => true,
        ))
    //...

le formulaire de LienAppliServ :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('ports', 'collection', array(
            'type' => new PortLienAppliServType(),
            'allow_add' => true,
            'allow_delete' => true,
            'prototype' => true,
            'by_reference' =>false
        ))
    //...

et le formulaire de PortLienAppliServ basique :

Code:

1
2
3
4
5
6
7
8
 
public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('numPort') //entier
        ->add('type') //entity
    ;
}

En suivant le post, j'en suis arrivé à ça :

HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
    {{ form_start(form) }}
 
            <ul id="col-servliens" data-prototype="{{ form_widget(form.servLiens.vars.prototype)|e }}">
                {# iterate over each existing tag and render its only field: name #}
                {% for servLiens in form.servLiens %}
                    <li>{{ form_row(servLiens) }} </li>
                    <ul id="col-ports" data-prototype="{{ form_widget(ports.vars.prototype)|e }}">
                    {%for ports in servLiens.ports %}
                        <li>{{ form_row(ports) }}</li>
                    {% endfor %}
 
                {% endfor %}
            </ul>
        {{ form_end(form) }}

JS :

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
 
 
    //Same as the other question
    <script>
        function FormCollection(div_id)
        {
            // keep reference to self in all child functions
            var self=this;
 
            self.construct = function () {
                // set some shortcuts
                self.div = $('#'+div_id);
                self.div.data('index', self.div.find(':input').length);
 
                // add delete link to existing children
                self.div.children().each(function() {
                    self.addDeleteLink($(this));
                });
 
                // add click event to the Add new button
                self.div.next().on('click', function(e) {
                    // prevent the link from creating a "#" on the URL
                    e.preventDefault();
 
                    // add a new tag form (see next code block)
                    self.addNew();
                });
            };
 
            /**
             * onClick event handler -- adds a new input
             */
            self.addNew = function () {
                // Get the data-prototype explained earlier
                var prototype = self.div.data('prototype');
 
                // get the new index
                var index = self.div.data('index');
 
                // Replace '__name__' in the prototype's HTML to
                // 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 next item
                self.div.data('index', index + 1);
 
                // Display the form in the page in an li, before the "Add a tag" link li
                self.div.append($(newForm));
 
                // add a delete link to the new form
                self.addDeleteLink( $(self.div.children(':last-child')[0]) );
 
                // not a very nice intergration.. but when creating stuff that has help icons,
                // the popovers will not automatically be instantiated
                //initHelpPopovers();
 
                return $(newForm);
            };
 
            /**
             * add Delete icon after input
             * @param Element row
             */
            self.addDeleteLink = function (row) {
                var $removeFormA = $('<a href="#" class="btn btn-danger" tabindex="-1"><i class="entypo-trash"></i></a>');
                $(row).find('select').after($removeFormA);
                row.append($removeFormA);
                $removeFormA.on('click', function(e) {
                    // prevent the link from creating a "#" on the URL
                    e.preventDefault();
 
                    // remove the li for the tag form
                    row.remove();
                });
            };
 
            self.construct();
        }
 
    </script>
 
 
    <script>
        $(document).ready(function() {
            new FormCollection('col-servliens');
            new FormCollection('col-ports');
        });
    </script>

Et la j'ai l'erreur : Variable "ports" does not exist.

Et je ne comprends pas...
J'ai beau tordre le problème dans tous les sens, je bloque... Donc si quelqu'un peut m'aider ça serait vraiment cool ^^

Merci !