@@ -273,6 +273,17 @@ new "tag" forms. To render it, make the following change to your template:
273
273
...
274
274
</ul>
275
275
276
+ On the rendered page, the result will look something like this:
277
+
278
+ .. code-block :: html
279
+
280
+ <ul class =" tags" data-prototype =" < ; div> ;< ; label class=" ; required" ;> ; __name__< ; /label> ;< ; div id=" ; task_tags___name__" ;> ;< ; div> ;< ; label for=" ; task_tags___name___name" ; class=" ; required" ;> ; Name< ; /label> ;< ; input type=" ; text" ; id=" ; task_tags___name___name" ; name=" ; task[tags][__name__][name]" ; required=" ; required" ; maxlength=" ; 255" ; /> ;< ; /div> ;< ; /div> ;< ; /div> ; " >
281
+
282
+ .. seealso ::
283
+
284
+ If you want to customize the HTML code in the prototype, see
285
+ :ref: `form-custom-prototype `.
286
+
276
287
.. note ::
277
288
278
289
If you render your whole "tags" sub-form at once (e.g. ``form_row(form.tags) ``),
@@ -291,12 +302,6 @@ new "tag" forms. To render it, make the following change to your template:
291
302
292
303
{{ form_widget(form.tags.vars.prototype.name)|e }}
293
304
294
- On the rendered page, the result will look something like this:
295
-
296
- .. code-block :: html
297
-
298
- <ul class =" tags" data-prototype =" < ; div> ;< ; label class=" ; required" ;> ; __name__< ; /label> ;< ; div id=" ; task_tags___name__" ;> ;< ; div> ;< ; label for=" ; task_tags___name___name" ; class=" ; required" ;> ; Name< ; /label> ;< ; input type=" ; text" ; id=" ; task_tags___name___name" ; name=" ; task[tags][__name__][name]" ; required=" ; required" ; maxlength=" ; 255" ; /> ;< ; /div> ;< ; /div> ;< ; /div> ; " >
299
-
300
305
The goal of this section will be to use JavaScript to read this attribute
301
306
and dynamically add new tag forms when the user clicks a "Add a tag" link.
302
307
To make things simple, this example uses jQuery and assumes you have it included
@@ -382,11 +387,6 @@ into new ``Tag`` objects and added to the ``tags`` property of the ``Task`` obje
382
387
383
388
You can find a working example in this `JSFiddle `_.
384
389
385
- .. seealso ::
386
-
387
- If you want to customize the HTML code in the prototype, read
388
- :ref: `form-custom-prototype `.
389
-
390
390
To make handling these new tags easier, add an "adder" and a "remover" method
391
391
for the tags in the ``Task `` class::
392
392
0 commit comments