@@ -242,7 +242,13 @@ the following ``data-prototype`` attribute to the existing ``<ul>`` in your temp
242
242
243
243
.. code-block :: html+twig
244
244
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>
246
252
247
253
On the rendered page, the result will look something like this:
248
254
@@ -274,38 +280,27 @@ On the rendered page, the result will look something like this:
274
280
and you need to adjust the following JavaScript accordingly.
275
281
276
282
The 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 .
278
284
This example uses jQuery and assumes you have it included somewhere on your page.
279
285
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):
285
289
286
290
.. code-block :: javascript
287
291
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
-
294
292
jQuery (document ).ready (function () {
295
293
// 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' );
301
295
// count the current form inputs we have (e.g. 2), use that as the new
302
296
// 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 );
304
298
305
- $addTagButton .on (' click' , function (e ) {
299
+ $ (' body' ).on (' click' , ' .add_item_link' , function (e ) {
300
+ var $collectionHolderClass = $ (e .currentTarget ).data (' collectionHolderClass' );
306
301
// add a new tag form (see next code block)
307
- addTagForm ($collectionHolder, $newLinkLi );
308
- });
302
+ addFormToCollection ($collectionHolderClass );
303
+ })
309
304
});
310
305
311
306
The ``addTagForm() `` function's job will be to use the ``data-prototype `` attribute
@@ -319,7 +314,10 @@ one example:
319
314
320
315
.. code-block :: javascript
321
316
322
- function addTagForm ($collectionHolder , $newLinkLi ) {
317
+ function addFormToCollection ($collectionHolderClass ) {
318
+ // Get the ul that holds the collection of tags
319
+ var $collectionHolder = $ (' .' + $collectionHolderClass);
320
+
323
321
// Get the data-prototype explained earlier
324
322
var prototype = $collectionHolder .data (' prototype' );
325
323
@@ -341,7 +339,8 @@ one example:
341
339
342
340
// Display the form in the page in an li, before the "Add a tag" link li
343
341
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)
345
344
}
346
345
347
346
.. note ::
0 commit comments