@@ -242,7 +242,13 @@ the following ``data-prototype`` attribute to the existing ``<ul>`` in your temp
242242
243243.. code-block :: html+twig
244244
245- <ul class="tags" data-prototype="{{ form_widget(form.tags.vars.prototype)|e('html_attr') }}">
245+ <ul class="tags" data-prototype="{{ form_widget(form.tags.vars.prototype)|e('html_attr') }}"></ul>
246+
247+ Now add a button just next to the ``<ul> `` to dynamically add a new tag
248+
249+ .. code-block :: html+twig
250+
251+ <button type="button" class="add_item_link" data-collection-holder-class="tags">Add a tag</button>
246252
247253On the rendered page, the result will look something like this:
248254
@@ -274,38 +280,27 @@ On the rendered page, the result will look something like this:
274280 and you need to adjust the following JavaScript accordingly.
275281
276282The goal of this section will be to use JavaScript to read this attribute
277- and dynamically add new tag forms when the user clicks a "Add a tag" link .
283+ and dynamically add new tag forms when the user clicks the "Add a tag" button .
278284This example uses jQuery and assumes you have it included somewhere on your page.
279285
280- Add a ``script `` tag somewhere on your page so you can start writing some JavaScript.
281-
282- First, add a link to the bottom of the "tags" list via JavaScript. Second,
283- bind to the "click" event of that link so you can add a new tag form (``addTagForm() ``
284- will be show next):
286+ Add a ``script `` tag somewhere on your page so you can start writing some
287+ JavaScript. In this script, bind to the "click" event of the "Add a tag"
288+ button so you can add a new tag form (``addFormToCollection() `` will be show next):
285289
286290.. code-block :: javascript
287291
288- var $collectionHolder;
289-
290- // setup an "add a tag" link
291- var $addTagButton = $ (' <button type="button" class="add_tag_link">Add a tag</button>' );
292- var $newLinkLi = $ (' <li></li>' ).append ($addTagButton);
293-
294292 jQuery (document ).ready (function () {
295293 // Get the ul that holds the collection of tags
296- $collectionHolder = $ (' ul.tags' );
297-
298- // add the "add a tag" anchor and li to the tags ul
299- $collectionHolder .append ($newLinkLi);
300-
294+ var $tagsCollectionHolder = $ (' ul.tags' );
301295 // count the current form inputs we have (e.g. 2), use that as the new
302296 // index when inserting a new item (e.g. 2)
303- $collectionHolder .data (' index' , $collectionHolder .find (' input' ).length );
297+ $tagsCollectionHolder .data (' index' , $tagsCollectionHolder .find (' input' ).length );
304298
305- $addTagButton .on (' click' , function (e ) {
299+ $ (' body' ).on (' click' , ' .add_item_link' , function (e ) {
300+ var $collectionHolderClass = $ (e .currentTarget ).data (' collectionHolderClass' );
306301 // add a new tag form (see next code block)
307- addTagForm ($collectionHolder, $newLinkLi );
308- });
302+ addFormToCollection ($collectionHolderClass );
303+ })
309304 });
310305
311306 The ``addTagForm() `` function's job will be to use the ``data-prototype `` attribute
@@ -319,7 +314,10 @@ one example:
319314
320315.. code-block :: javascript
321316
322- function addTagForm ($collectionHolder , $newLinkLi ) {
317+ function addFormToCollection ($collectionHolderClass ) {
318+ // Get the ul that holds the collection of tags
319+ var $collectionHolder = $ (' .' + $collectionHolderClass);
320+
323321 // Get the data-prototype explained earlier
324322 var prototype = $collectionHolder .data (' prototype' );
325323
@@ -341,7 +339,8 @@ one example:
341339
342340 // Display the form in the page in an li, before the "Add a tag" link li
343341 var $newFormLi = $ (' <li></li>' ).append (newForm);
344- $newLinkLi .before ($newFormLi);
342+ // Add the new form at the end of the list
343+ $collectionHolder .append ($newFormLi)
345344 }
346345
347346 .. note ::
0 commit comments