Skip to content

Commit 0528509

Browse files
javiereguiluzxabbuh
authored andcommitted
minor #8205 Move JavaScript to separate file (technetium, javiereguiluz)
This PR was merged into the 2.8 branch. Discussion ---------- Move JavaScript to separate file By creating a more general JavaScript code and putting it in a separate file, it can be used for all collections. This makes the code more DRY. Commits ------- 98b1c7b Minor tweaks 5594d7e Move JavaScript to seperate file
1 parent a5e2b47 commit 0528509

File tree

1 file changed

+55
-46
lines changed

1 file changed

+55
-46
lines changed

reference/forms/types/collection.rst

Lines changed: 55 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -156,55 +156,64 @@ Using jQuery, a simple example might look like this. If you're rendering
156156
your collection fields all at once (e.g. ``form_row(form.emails)``), then
157157
things are even easier because the ``data-prototype`` attribute is rendered
158158
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>
160208
161-
.. configuration-block::
209+
<a href="#"
210+
class="add-another-collection-widget"
211+
data-list="#email-field-list>Add another email</a>
162212

163-
.. code-block:: html+twig
213+
{# ... #}
214+
{{ form_end(form) }}
164215

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

209218
.. tip::
210219

0 commit comments

Comments
 (0)