@@ -156,55 +156,64 @@ Using jQuery, a simple example might look like this. If you're rendering
156
156
your collection fields all at once (e.g. ``form_row(form.emails) ``), then
157
157
things are even easier because the ``data-prototype `` attribute is rendered
158
158
automatically for you (with a slight difference - see note below) and all
159
- you need is the JavaScript:
159
+ you need is this JavaScript code:
160
+
161
+ .. code-block :: javascript
162
+
163
+ // add-collection-widget.js
164
+ jQuery (document ).ready (function () {
165
+ jQuery (' .add-another-collection-widget' ).click (function (e ) {
166
+ e .preventDefault ();
167
+ var list = jQuery (jQuery (this ).attr (' data-list' ));
168
+ // Try to find the counter of the list
169
+ var counter = list .data (' widget-counter' ) | list .children ().length ;
170
+ // If the counter does not exist, use the length of the list
171
+ if (! counter) { counter = list .children ().length ; }
172
+
173
+ // grab the prototype template
174
+ var newWidget = list .attr (' data-prototype' );
175
+ // replace the "__name__" used in the id and name of the prototype
176
+ // with a number that's unique to your emails
177
+ // end name attribute looks like name="contact[emails][2]"
178
+ newWidget = newWidget .replace (/ __name__/ g , counter);
179
+ // Increase the counter
180
+ counter++ ;
181
+ // And store it, the length cannot be used if deleting widgets is allowed
182
+ list .data (' widget-counter' , counter);
183
+
184
+ // create a new list element and add it to the list
185
+ var newElem = jQuery (list .attr (' data-widget-tags' )).html (newWidget);
186
+ newElem .appendTo (list);
187
+ });
188
+ });
189
+
190
+ And update the template as follows:
191
+
192
+ .. code-block :: html+twig
193
+
194
+ {{ form_start(form) }}
195
+ {# ... #}
196
+
197
+ {# store the prototype on the data-prototype attribute #}
198
+ <ul id="email-fields-list"
199
+ data-prototype="{{ form_widget(form.emails.vars.prototype)|e }}"
200
+ data-widget-tags="{{ '<li></li>'|e }}">
201
+ {% for emailField in form.emails %}
202
+ <li>
203
+ {{ form_errors(emailField) }}
204
+ {{ form_widget(emailField) }}
205
+ </li>
206
+ {% endfor %}
207
+ </ul>
160
208
161
- .. configuration-block ::
209
+ <a href="#"
210
+ class="add-another-collection-widget"
211
+ data-list="#email-field-list>Add another email</a>
162
212
163
- .. code-block :: html+twig
213
+ {# ... #}
214
+ {{ form_end(form) }}
164
215
165
- {{ form_start(form) }}
166
- {# ... #}
167
-
168
- {# store the prototype on the data-prototype attribute #}
169
- <ul id="email-fields-list"
170
- data-prototype="{{ form_widget(form.emails.vars.prototype)|e }}">
171
- {% for emailField in form.emails %}
172
- <li>
173
- {{ form_errors(emailField) }}
174
- {{ form_widget(emailField) }}
175
- </li>
176
- {% endfor %}
177
- </ul>
178
-
179
- <a href="#" id="add-another-email">Add another email</a>
180
-
181
- {# ... #}
182
- {{ form_end(form) }}
183
-
184
- <script type="text/javascript">
185
- // keep track of how many email fields have been rendered
186
- var emailCount = '{{ form.emails|length }}';
187
-
188
- jQuery(document).ready(function() {
189
- jQuery('#add-another-email').click(function(e) {
190
- e.preventDefault();
191
-
192
- var emailList = jQuery('#email-fields-list');
193
-
194
- // grab the prototype template
195
- var newWidget = emailList.attr('data-prototype');
196
- // replace the "__name__" used in the id and name of the prototype
197
- // with a number that's unique to your emails
198
- // end name attribute looks like name="contact[emails][2]"
199
- newWidget = newWidget.replace(/__name__/g, emailCount);
200
- emailCount++;
201
-
202
- // create a new list element and add it to the list
203
- var newLi = jQuery('<li></li>').html(newWidget);
204
- newLi.appendTo(emailList);
205
- });
206
- })
207
- </script>
216
+ <script src="add-collection-widget.js"></script>
208
217
209
218
.. tip ::
210
219
0 commit comments