Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[WCM][Form] adjust collection example to data-property-name attribute #2544

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

[WCM][Form] adjust collection example to data-property-name attribute #2544

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions cookbook/form/form_collections.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,7 +347,7 @@ On the rendered page, the result will look something like this:

.. code-block:: html

<ul class="tags" data-prototype="&lt;div&gt;&lt;label class=&quot; required&quot;&gt;__name__&lt;/label&gt;&lt;div id=&quot;task_tags___name__&quot;&gt;&lt;div&gt;&lt;label for=&quot;task_tags___name___name&quot; class=&quot; required&quot;&gt;Name&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;task_tags___name___name&quot; name=&quot;task[tags][__name__][name]&quot; required=&quot;required&quot; maxlength=&quot;255&quot; /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;">
<ul class="tags" data-prototype="&lt;div&gt;&lt;label class=&quot; required&quot;&gt;__name__&lt;/label&gt;&lt;div id=&quot;task_tags___name__&quot;&gt;&lt;div&gt;&lt;label for=&quot;task_tags___name___name&quot; class=&quot; required&quot;&gt;Name&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;task_tags___name___name&quot; name=&quot;task[tags][__name__][name]&quot; required=&quot;required&quot; maxlength=&quot;255&quot; /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;" data-prototype-name="__name__">

The goal of this section will be to use JavaScript to read this attribute
and dynamically add new tag forms when the user clicks a "Add a tag" link.
Expand Down Expand Up @@ -390,7 +390,9 @@ The ``addTagForm`` function's job will be to use the ``data-prototype`` attribut
to dynamically add a new form when this link is clicked. The ``data-prototype``
HTML contains the tag ``text`` input element with a name of ``task[tags][__name__][name]``
and id of ``task_tags___name___name``. The ``__name__`` is a little "placeholder",
which you'll replace with a unique, incrementing number (e.g. ``task[tags][3][name]``).
which you'll replace with a unique, incrementing number (e.g. ``task[tags][3][name]``).
Since you can change this placeholder with the option "prototype_name" the actual name is
provided in the ``data-prototype-name`` attribute.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should be inside a .. versionadded:: 2.3 block with a slightly different rewording.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did the code PR against 2.2 - I will adjust this once that is merged and use the proper version then, agreed?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

well, it's a new feature so it definitely don't get into the 2.2 branch. It gets into 2.3 or 2.4

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's see when and where the code gets merged :-)


.. versionadded:: 2.1
The placeholder was changed from ``$$name$$`` to ``__name__`` in Symfony 2.1
Expand All @@ -403,13 +405,15 @@ one example:
function addTagForm(collectionHolder, $newLinkLi) {
// Get the data-prototype explained earlier
var prototype = collectionHolder.data('prototype');
var prototypeName = collectionHolder.data('prototype-name');

// get the new index
var index = collectionHolder.data('index');

// Replace '__name__' in the prototype's HTML to
// Replace prototypeName in the prototype's HTML to
// instead be a number based on how many items we have
var newForm = prototype.replace(/__name__/g, index);
var re = new RegExp(prototypeName, "g");
var newForm = prototype.replace(re, index);

// increase the index with one for the next item
collectionHolder.data('index', index + 1);
Expand Down
6 changes: 6 additions & 0 deletions reference/forms/types/collection.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,6 +334,12 @@ If you have several collections in your form, or worse, nested collections
you may want to change the placeholder so that unrelated placeholders are not
replaced with the same value.

.. tip::

If you're rendering the entire collection field at once, then the prototype_name
is available on the ``data-prototype-name`` attribute
of the element (e.g. ``div`` or ``table``) that surrounds your collection.

Inherited options
-----------------

Expand Down