@@ -245,7 +245,7 @@ the following ``data-prototype`` attribute to the existing ``<ul>`` in your temp
245
245
246
246
<ul class="tags" data-prototype="{{ form_widget(form.tags.vars.prototype)|e('html_attr') }}"></ul>
247
247
248
- Now add a button just next to the ``<ul> `` to dynamically add a new tag
248
+ Now add a button just next to the ``<ul> `` to dynamically add a new tag:
249
249
250
250
.. code-block :: html+twig
251
251
@@ -280,13 +280,13 @@ On the rendered page, the result will look something like this:
280
280
the ``data-prototype `` attribute is automatically added to the containing ``div ``,
281
281
and you need to adjust the following JavaScript accordingly.
282
282
283
- The goal of this section will be to use JavaScript to read this attribute
284
- and dynamically add new tag forms when the user clicks the "Add a tag" button.
285
- This example uses jQuery and assumes you have it included somewhere on your page.
283
+ Now add some JavaScript to read this attribute and dynamically add new tag forms
284
+ when the user clicks the "Add a tag" link. This example uses `jQuery `_ and
285
+ assumes you have it included somewhere on your page (e.g. using Symfony's
286
+ :doc: `Webpack Encore </frontend >`).
286
287
287
- Add a ``script `` tag somewhere on your page so you can start writing some
288
- JavaScript. In this script, bind to the "click" event of the "Add a tag"
289
- button so you can add a new tag form (``addFormToCollection() `` will be show next):
288
+ Add a ``<script> `` tag somewhere on your page to include the required
289
+ functionality with JavaScript:
290
290
291
291
.. code-block :: javascript
292
292
@@ -304,14 +304,11 @@ button so you can add a new tag form (``addFormToCollection()`` will be show nex
304
304
})
305
305
});
306
306
307
- The ``addTagForm() `` function's job will be to use the ``data-prototype `` attribute
308
- to dynamically add a new form when this link is clicked. The ``data-prototype ``
309
- HTML contains the tag ``text `` input element with a name of ``task[tags][__name__][name] ``
310
- and id of ``task_tags___name___name ``. The ``__name__ `` is a little "placeholder",
311
- which you'll replace with a unique, incrementing number (e.g. ``task[tags][3][name] ``).
312
-
313
- The actual code needed to make this all work can vary quite a bit, but here's
314
- one example:
307
+ The ``addFormToCollection() `` function's job will be to use the ``data-prototype ``
308
+ attribute to dynamically add a new form when this link is clicked. The ``data-prototype ``
309
+ HTML contains the tag's ``text `` input element with a name of ``task[tags][__name__][name] ``
310
+ and id of ``task_tags___name___name ``. The ``__name__ `` is a placeholder, which
311
+ you'll replace with a unique, incrementing number (e.g. ``task[tags][3][name] ``):
315
312
316
313
.. code-block :: javascript
317
314
@@ -344,11 +341,6 @@ one example:
344
341
$collectionHolder .append ($newFormLi)
345
342
}
346
343
347
- .. note ::
348
-
349
- It is better to separate your JavaScript in real JavaScript files than
350
- to write it inside the HTML as is done here.
351
-
352
344
Now, each time a user clicks the ``Add a tag `` link, a new sub form will
353
345
appear on the page. When the form is submitted, any new tag forms will be converted
354
346
into new ``Tag `` objects and added to the ``tags `` property of the ``Task `` object.
@@ -572,7 +564,7 @@ First, add a "delete this tag" link to each tag form:
572
564
// ... the rest of the block from above
573
565
});
574
566
575
- function addTagForm () {
567
+ function addFormToCollection () {
576
568
// ...
577
569
578
570
// add a delete link to the new form
@@ -684,6 +676,7 @@ the relationship between the removed ``Tag`` and ``Task`` object.
684
676
the `symfony-collection `_ package based on jQuery for the rest of browsers.
685
677
686
678
.. _`Owning Side and Inverse Side` : https://www.doctrine-project.org/projects/doctrine-orm/en/current/reference/unitofwork-associations.html
679
+ .. _`jQuery` : http://jquery.com/
687
680
.. _`JSFiddle` : http://jsfiddle.net/847Kf/4/
688
681
.. _`@a2lix/symfony-collection` : https://github.com/a2lix/symfony-collection
689
682
.. _`symfony-collection` : https://github.com/ninsuo/symfony-collection
0 commit comments