Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit3abeceb

Browse files
tcheymolwouterj
authored andcommitted
[Collection forms] Make javascript generic
1 parent8b0a921 commit3abeceb

File tree

1 file changed

+19
-18
lines changed

1 file changed

+19
-18
lines changed

‎form/form_collections.rst‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,13 @@ the following ``data-prototype`` attribute to the existing ``<ul>`` in your temp
242242

243243
..code-block::html+twig
244244

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>
246252

247253
On the rendered page, the result will look something like this:
248254

@@ -285,27 +291,18 @@ will be show next):
285291

286292
..code-block::javascript
287293
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-
294294
jQuery(document).ready(function() {
295295
// 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-
296+
var $tagsCollectionHolder=$('ul.tags');
301297
// count the current form inputs we have (e.g. 2), use that as the new
302298
// index when inserting a new item (e.g. 2)
303-
$collectionHolder.data('index',$collectionHolder.find('input').length);
299+
$tagsCollectionHolder.data('index',$tagsCollectionHolder.find('input').length);
304300
305-
$addTagButton.on('click',function(e) {
301+
$('body').on('click','.add_item_link',function(e) {
302+
var $collectionHolderClass=$(e.currentTarget).data('collectionHolderClass');
306303
// add a new tag form (see next code block)
307-
addTagForm($collectionHolder, $newLinkLi);
308-
});
304+
addFormToCollection($collectionHolderClass);
305+
})
309306
});
310307
311308
The ``addTagForm()`` function's job will be to use the ``data-prototype`` attribute
@@ -319,7 +316,10 @@ one example:
319316

320317
..code-block::javascript
321318
322-
functionaddTagForm($collectionHolder,$newLinkLi) {
319+
functionaddFormToCollection($collectionHolderClass) {
320+
// Get the ul that holds the collection of tags
321+
var $collectionHolder=$('.'+ $collectionHolderClass);
322+
323323
// Get the data-prototype explained earlier
324324
var prototype=$collectionHolder.data('prototype');
325325
@@ -341,7 +341,8 @@ one example:
341341
342342
// Display the form in the page in an li, before the "Add a tag" link li
343343
var $newFormLi=$('<li></li>').append(newForm);
344-
$newLinkLi.before($newFormLi);
344+
// Add the new form at the end of the list
345+
$collectionHolder.append($newFormLi)
345346
}
346347
347348
..note::

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp