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

Commit0ceb959

Browse files
committed
minor#14340 [Collection forms] Make javascript generic (tcheymol)
This PR was submitted for the master branch but it was merged into the 4.4 branch instead.Discussion----------[Collection forms] Make javascript genericThis pull request aims at making javascript code on the "embeded collection form" section reusable in any form collection* The aim is that we only need to add a `<ul>` tag, and add one init line in javascript if we embed another form collection* Also, I think that the `$addLinkLi` can perfectly be added in Twig instead of javascript, it reduces the size of the js function and improoves reusabilityWhat I did is* Remove the `$addLinkLi` from javacripts* Add a data attribute to it so it can reference the list container class : `data-collection-holder-class`I created a sample project implementing my working solution [here](https://github.com/tcheymol/embeed_form_collection_test)Commits-------3abeceb [Collection forms] Make javascript generic
2 parents8b0a921 +3abeceb commit0ceb959

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