Skip to content

Commit c4f7169

Browse files
committed
Merge branch '4.4' into 5.1
* 4.4: Fixing function name Shortening the text some more Shortening the text and adding link to jQuery
2 parents 187be74 + c34ef27 commit c4f7169

File tree

1 file changed

+14
-21
lines changed

1 file changed

+14
-21
lines changed

form/form_collections.rst

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@ the following ``data-prototype`` attribute to the existing ``<ul>`` in your temp
245245

246246
<ul class="tags" data-prototype="{{ form_widget(form.tags.vars.prototype)|e('html_attr') }}"></ul>
247247

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:
249249

250250
.. code-block:: html+twig
251251

@@ -280,13 +280,13 @@ On the rendered page, the result will look something like this:
280280
the ``data-prototype`` attribute is automatically added to the containing ``div``,
281281
and you need to adjust the following JavaScript accordingly.
282282

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>`).
286287

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:
290290

291291
.. code-block:: javascript
292292
@@ -304,14 +304,11 @@ button so you can add a new tag form (``addFormToCollection()`` will be show nex
304304
})
305305
});
306306
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]``):
315312

316313
.. code-block:: javascript
317314
@@ -344,11 +341,6 @@ one example:
344341
$collectionHolder.append($newFormLi)
345342
}
346343
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-
352344
Now, each time a user clicks the ``Add a tag`` link, a new sub form will
353345
appear on the page. When the form is submitted, any new tag forms will be converted
354346
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:
572564
// ... the rest of the block from above
573565
});
574566
575-
function addTagForm() {
567+
function addFormToCollection() {
576568
// ...
577569
578570
// add a delete link to the new form
@@ -684,6 +676,7 @@ the relationship between the removed ``Tag`` and ``Task`` object.
684676
the `symfony-collection`_ package based on jQuery for the rest of browsers.
685677

686678
.. _`Owning Side and Inverse Side`: https://www.doctrine-project.org/projects/doctrine-orm/en/current/reference/unitofwork-associations.html
679+
.. _`jQuery`: http://jquery.com/
687680
.. _`JSFiddle`: http://jsfiddle.net/847Kf/4/
688681
.. _`@a2lix/symfony-collection`: https://github.com/a2lix/symfony-collection
689682
.. _`symfony-collection`: https://github.com/ninsuo/symfony-collection

0 commit comments

Comments
 (0)