From de2aac2891cdc07d37f5fe8fcabd9ebafb2a7ca9 Mon Sep 17 00:00:00 2001 From: Giuseppe Attardi Date: Tue, 5 Nov 2013 18:31:58 +0100 Subject: [PATCH 1/2] Update form_collections.rst The assignment to collectionHolder must be done within jQuery ready function, or else it will be null. BTW, the variables in JavaScript do not need the $, which is confusing since in jQuery $ has a special meaning. --- cookbook/form/form_collections.rst | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/cookbook/form/form_collections.rst b/cookbook/form/form_collections.rst index e5fa49f06b0..06bce586a0d 100755 --- a/cookbook/form/form_collections.rst +++ b/cookbook/form/form_collections.rst @@ -358,27 +358,27 @@ will be show next): .. code-block:: javascript - // Get the ul that holds the collection of tags - var collectionHolder = $('ul.tags'); - // setup an "add a tag" link - var $addTagLink = $('Add a tag'); - var $newLinkLi = $('
  • ').append($addTagLink); + var addTagLink = $('Add a tag'); + var newLinkLi = $('
  • ').append(addTagLink); jQuery(document).ready(function() { + // Get the ul that holds the collection of tags + var collectionHolder = $('ul.tags'); + // add the "add a tag" anchor and li to the tags ul - collectionHolder.append($newLinkLi); + collectionHolder.append(newLinkLi); // count the current form inputs we have (e.g. 2), use that as the new // index when inserting a new item (e.g. 2) collectionHolder.data('index', collectionHolder.find(':input').length); - $addTagLink.on('click', function(e) { + addTagLink.on('click', function(e) { // prevent the link from creating a "#" on the URL e.preventDefault(); // add a new tag form (see next code block) - addTagForm(collectionHolder, $newLinkLi); + addTagForm(collectionHolder, newLinkLi); }); }); @@ -393,7 +393,7 @@ one example: .. code-block:: javascript - function addTagForm(collectionHolder, $newLinkLi) { + function addTagForm(collectionHolder, newLinkLi) { // Get the data-prototype explained earlier var prototype = collectionHolder.data('prototype'); @@ -408,8 +408,8 @@ one example: collectionHolder.data('index', index + 1); // Display the form in the page in an li, before the "Add a tag" link li - var $newFormLi = $('
  • ').append(newForm); - $newLinkLi.before($newFormLi); + var newFormLi = $('
  • ').append(newForm); + newLinkLi.before(newFormLi); } .. note:: From bd4abba5858386721e7e29a7b8988df1a4b2ea29 Mon Sep 17 00:00:00 2001 From: Giuseppe Attardi Date: Sat, 9 Nov 2013 20:12:20 +0100 Subject: [PATCH 2/2] Update form_collections.rst The variable collectionHolder must be assigned inside the jQuery ready function, but must be declared outside, since it is used also in other functions. I have put back the '$' in front of names of variables having jQuery objects as values and for uniformity, also added it to collectionHolder. --- cookbook/form/form_collections.rst | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/cookbook/form/form_collections.rst b/cookbook/form/form_collections.rst index 06bce586a0d..c62ab281014 100755 --- a/cookbook/form/form_collections.rst +++ b/cookbook/form/form_collections.rst @@ -358,27 +358,29 @@ will be show next): .. code-block:: javascript + var $collectionHolder; + // setup an "add a tag" link - var addTagLink = $('Add a tag'); - var newLinkLi = $('
  • ').append(addTagLink); + var $addTagLink = $('Add a tag'); + var $newLinkLi = $('
  • ').append($addTagLink); jQuery(document).ready(function() { // Get the ul that holds the collection of tags - var collectionHolder = $('ul.tags'); + $collectionHolder = $('ul.tags'); // add the "add a tag" anchor and li to the tags ul - collectionHolder.append(newLinkLi); + $collectionHolder.append($newLinkLi); // count the current form inputs we have (e.g. 2), use that as the new // index when inserting a new item (e.g. 2) - collectionHolder.data('index', collectionHolder.find(':input').length); + $collectionHolder.data('index', $collectionHolder.find(':input').length); - addTagLink.on('click', function(e) { + $addTagLink.on('click', function(e) { // prevent the link from creating a "#" on the URL e.preventDefault(); // add a new tag form (see next code block) - addTagForm(collectionHolder, newLinkLi); + addTagForm($collectionHolder, $newLinkLi); }); }); @@ -393,23 +395,23 @@ one example: .. code-block:: javascript - function addTagForm(collectionHolder, newLinkLi) { + function addTagForm($collectionHolder, $newLinkLi) { // Get the data-prototype explained earlier - var prototype = collectionHolder.data('prototype'); + var prototype = $collectionHolder.data('prototype'); // get the new index - var index = collectionHolder.data('index'); + var index = $collectionHolder.data('index'); // Replace '$$name$$' in the prototype's HTML to // instead be a number based on how many items we have var newForm = prototype.replace(/\$\$name\$\$/g, index); // increase the index with one for the next item - collectionHolder.data('index', index + 1); + $collectionHolder.data('index', index + 1); // Display the form in the page in an li, before the "Add a tag" link li - var newFormLi = $('
  • ').append(newForm); - newLinkLi.before(newFormLi); + var $newFormLi = $('
  • ').append($newForm); + $newLinkLi.before($newFormLi); } .. note::