From 5594d7ed0f0b79d0071b3768dcb8c4fa85651bdc Mon Sep 17 00:00:00 2001 From: technetium Date: Fri, 21 Jul 2017 14:32:48 +0200 Subject: [PATCH 1/2] Move JavaScript to seperate 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. --- reference/forms/types/collection.rst | 62 ++++++++++++++++------------ 1 file changed, 36 insertions(+), 26 deletions(-) diff --git a/reference/forms/types/collection.rst b/reference/forms/types/collection.rst index d189e3a4680..d4d4715f7a5 100644 --- a/reference/forms/types/collection.rst +++ b/reference/forms/types/collection.rst @@ -158,6 +158,7 @@ things are even easier because the ``data-prototype`` attribute is rendered automatically for you (with a slight difference - see note below) and all you need is the JavaScript: + .. configuration-block:: .. code-block:: html+twig @@ -167,7 +168,8 @@ you need is the JavaScript: {# store the prototype on the data-prototype attribute #} - Add another email + - // keep track of how many email fields have been rendered - var emailCount = '{{ form.emails|length }}'; - - jQuery(document).ready(function() { - jQuery('#add-another-email').click(function(e) { - e.preventDefault(); - - var emailList = jQuery('#email-fields-list'); - - // grab the prototype template - var newWidget = emailList.attr('data-prototype'); - // replace the "__name__" used in the id and name of the prototype - // with a number that's unique to your emails - // end name attribute looks like name="contact[emails][2]" - newWidget = newWidget.replace(/__name__/g, emailCount); - emailCount++; - - // create a new list element and add it to the list - var newLi = jQuery('
  • ').html(newWidget); - newLi.appendTo(emailList); - }); - }) - + + + .. code-block:: javascript + + // add-collection-widget.js + jQuery(document).ready(function () { + jQuery('.add-another-collection-widget').click(function (e) { + e.preventDefault(); + var list = jQuery(jQuery(this).attr('data-list')); + // Try to find the counter of the list + var counter = list.data('widget-counter'); + // If the counter does not exist, use the length of the list + if (!counter) { counter = list.children().length; } + + // grab the prototype template + var newWidget = list.attr('data-prototype'); + // replace the "__name__" used in the id and name of the prototype + // with a number that's unique to your emails + // end name attribute looks like name="contact[emails][2]" + newWidget = newWidget.replace(/__name__/g, counter); + // Increase the counter + counter++; + // And store it, the length cannot be used if deleting widgets is allowed + list.data(' widget-counter', counter); + + // create a new list element and add it to the list + var newElem = jQuery(list.attr('data-widget-tags')).html(newWidget); + newElem.appendTo(list); + }); + }); .. tip:: From 98b1c7b51a7944246a583d4059a0b5e3da3eb095 Mon Sep 17 00:00:00 2001 From: Javier Eguiluz Date: Wed, 10 Jan 2018 10:43:09 +0100 Subject: [PATCH 2/2] Minor tweaks --- reference/forms/types/collection.rst | 109 +++++++++++++-------------- 1 file changed, 54 insertions(+), 55 deletions(-) diff --git a/reference/forms/types/collection.rst b/reference/forms/types/collection.rst index d4d4715f7a5..492350263b5 100644 --- a/reference/forms/types/collection.rst +++ b/reference/forms/types/collection.rst @@ -156,65 +156,64 @@ Using jQuery, a simple example might look like this. If you're rendering your collection fields all at once (e.g. ``form_row(form.emails)``), then things are even easier because the ``data-prototype`` attribute is rendered automatically for you (with a slight difference - see note below) and all -you need is the JavaScript: +you need is this JavaScript code: + +.. code-block:: javascript + + // add-collection-widget.js + jQuery(document).ready(function () { + jQuery('.add-another-collection-widget').click(function (e) { + e.preventDefault(); + var list = jQuery(jQuery(this).attr('data-list')); + // Try to find the counter of the list + var counter = list.data('widget-counter') | list.children().length; + // If the counter does not exist, use the length of the list + if (!counter) { counter = list.children().length; } + + // grab the prototype template + var newWidget = list.attr('data-prototype'); + // replace the "__name__" used in the id and name of the prototype + // with a number that's unique to your emails + // end name attribute looks like name="contact[emails][2]" + newWidget = newWidget.replace(/__name__/g, counter); + // Increase the counter + counter++; + // And store it, the length cannot be used if deleting widgets is allowed + list.data(' widget-counter', counter); + + // create a new list element and add it to the list + var newElem = jQuery(list.attr('data-widget-tags')).html(newWidget); + newElem.appendTo(list); + }); + }); +And update the template as follows: -.. configuration-block:: +.. code-block:: html+twig - .. code-block:: html+twig + {{ form_start(form) }} + {# ... #} - {{ form_start(form) }} - {# ... #} - - {# store the prototype on the data-prototype attribute #} -
      - {% for emailField in form.emails %} -
    • - {{ form_errors(emailField) }} - {{ form_widget(emailField) }} -
      • - {% endfor %} -
    - -     - - .. code-block:: javascript - - // add-collection-widget.js - jQuery(document).ready(function () { - jQuery('.add-another-collection-widget').click(function (e) { - e.preventDefault(); - var list = jQuery(jQuery(this).attr('data-list')); - // Try to find the counter of the list - var counter = list.data('widget-counter'); - // If the counter does not exist, use the length of the list - if (!counter) { counter = list.children().length; } - - // grab the prototype template - var newWidget = list.attr('data-prototype'); - // replace the "__name__" used in the id and name of the prototype - // with a number that's unique to your emails - // end name attribute looks like name="contact[emails][2]" - newWidget = newWidget.replace(/__name__/g, counter); - // Increase the counter - counter++; - // And store it, the length cannot be used if deleting widgets is allowed - list.data(' widget-counter', counter); - - // create a new list element and add it to the list - var newElem = jQuery(list.attr('data-widget-tags')).html(newWidget); - newElem.appendTo(list); - }); - }); + {# store the prototype on the data-prototype attribute #} + + + .. tip::