minor #10953 Improve add to collection JS example (welcoMattic)

javiereguiluz · javiereguiluz · commit 9736d395bbce · 2019-02-01T17:08:47.000+01:00
This PR was merged into the 4.2 branch. Discussion ---------- Improve add to collection JS example - Improve `data-*` attributes naming (more precise) - Add missing `data-widget-counter` in Twig code block  Commits ------- 907703b Improve add to collection JS exemple
diff --git a/reference/forms/types/collection.rst b/reference/forms/types/collection.rst
@@ -149,7 +149,7 @@ you need is this JavaScript code:
     // add-collection-widget.js
     jQuery(document).ready(function () {
         jQuery('.add-another-collection-widget').click(function (e) {
-            var list = jQuery(jQuery(this).attr('data-list'));
+            var list = jQuery(jQuery(this).attr('data-list-selector'));
             // Try to find the counter of the list or use the length of the list
             var counter = list.data('widget-counter') | list.children().length;
 
@@ -180,7 +180,8 @@ And update the template as follows:
         {# store the prototype on the data-prototype attribute #}
         <ul id="email-fields-list"
             data-prototype="{{ form_widget(form.emails.vars.prototype)|e }}"
-            data-widget-tags="{{ '<li></li>'|e }}">
+            data-widget-tags="{{ '<li></li>'|e }}"
+            data-widget-counter="{{ form.children|length }}">
         {% for emailField in form.emails %}
             <li>
                 {{ form_errors(emailField) }}
@@ -191,7 +192,7 @@ And update the template as follows:
 
         <button type="button"
             class="add-another-collection-widget"
-            data-list="#email-fields-list">Add another email</button>
+            data-list-selector="#email-fields-list">Add another email</button>
 
         {# ... #}
     {{ form_end(form) }}
