Merge pull request #4 from kloverde/1.2

kloverde · web-flow · commit ad314aaa2e53 · 2016-08-31T21:39:40.000-04:00
Merge branch 1.2 to master
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## Release 1.2 (August 31, 20106)
+
+* Added callbacks for add/remove operations
+* Throw an exeption if initialized with a non-existent ID
+
+
 ## Release 1.1.2 (August 29, 2016)
 
 * Changed an occurrence of prop() to attr() - no functional impact, but made for the sake of correctness
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
-AddRemoveTextbox v1.1.2
-=======================
+AddRemoveTextbox v1.2
+=====================
 
 See LICENSE for this software's licensing terms.
 
@@ -12,6 +12,7 @@ AddRemoveTextbox is a jQuery plugin which provides for dynamic creation and remo
 * Configurable CSS classes for the 'add' and 'remove' buttons
 * Configurable tooltips for the 'add' and 'remove' buttons
 * Configurable limit on the number of input fields
+* Configurable callbacks for add and remove operations
 * Able to renumber id and name attributes to keep them contiguous (enabled through a configuration option)
 
 
@@ -83,6 +84,8 @@ See the included HTML file for more in-depth examples.
 | `maxFields` | An optional limit on the number of fields which may exist under the applicable ID prefix.  If a value is specified, it must be an integer greater than 1. | null (no limit) |
 | `contiguous` | If `true`, renumber the `id` and `name` attributes upon initialization and when a row is removed.  Renumbering is based on DOM order, not `id` or `name` values, and starts on the value specified by `startingNumber`.  This setting is disabled by default because it can break applications. | false |
 | `startingNumber` | This setting is used only when `contiguous` is set to `true`. | null |
+| `addCallback` | A callback function to execute when a field is added.  See the demo for more information. | null |
+| `removeCallback` | A callback function to execute when a field is removed.  See the demo for more information. | null |
 
 
 ## Thanks
diff --git a/demo/css/demo.css b/demo/css/demo.css
@@ -1,5 +1,5 @@
 /*
- * AddRemoveTextbox v1.1.2
+ * AddRemoveTextbox v1.2
  * https://www.github.com/kloverde/jquery-AddRemoveTextbox
  *
  * Donations:  https://paypal.me/KurtisLoVerde/5
diff --git a/demo/demo.html b/demo/demo.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 
 <!--
-   AddRemoveTextbox v1.1.2
+   AddRemoveTextbox v1.2
    https://www.github.com/kloverde/jquery-AddRemoveTextbox
   
    Donations:  https://paypal.me/KurtisLoVerde/5
@@ -55,6 +55,14 @@
       <script type="text/javascript" src="../jquery.addremovetextbox.js"></script>
 
       <script type="text/javascript">
+         function callbackDemoAdd( id, name ) {
+            alert( "Added field with id = " + id + ", name = " + name );
+         }
+
+         function callbackDemoRemove( id, name, val ) {
+            alert( "Field '" + id + "' was removed.  Its value was '" + val + "'" );
+         }
+
          $( document ).ready( function() {
             // Example 1
 
@@ -109,6 +117,15 @@
                removeButtonClass : "addRemoveButton imgRemove",
                maxFields         : 3
             } );
+
+            // Example 7
+
+            $( "#callbackDemo1" ).addRemoveTextbox( {
+               addButtonClass    : "addRemoveButton imgAdd",
+               removeButtonClass : "addRemoveButton imgRemove",
+               addCallback       : callbackDemoAdd,
+               removeCallback    : callbackDemoRemove
+            } );
          } );
       </script>
    </head>
@@ -218,6 +235,22 @@ <h3>Example 6:  Setting a limit on how many fields can be generated</h3>
          </div>
       </div>
 
+      <h3>Example 7:  Callbacks</h3>
+      <p>
+         This example defines a callback that gets triggered when a field is added.
+         The callback then adds a blur callback to watch it for changes.  Try it: 
+         add a field, type a value into it, then click outside the field.
+      </p>
+      <p>
+         This example also defines a callback that gets triggered when a field is
+         removed.  Remove a field and see what happens.
+      </p>
+      <div id="example7">
+         <div class="txtBoxRow">
+            <input type="text" id="callbackDemo1"/>
+         </div>
+      </div>
+
       <h2>Donations</h2>
       <p>
          I hope you found the code behind these examples helpful.  Please consider donating to this project to show your
diff --git a/jquery.addremovetextbox.js b/jquery.addremovetextbox.js
@@ -1,5 +1,5 @@
 /*
- * AddRemoveTextbox v1.1.2
+ * AddRemoveTextbox v1.2
  * https://www.github.com/kloverde/jquery-AddRemoveTextbox
  *
  * Donations:  https://paypal.me/KurtisLoVerde/5
@@ -62,9 +62,24 @@
          contiguous          : false,
 
          // This setting is used only when 'contiguous' is set to true.
-         startingNumber      : 0
+         startingNumber      : 0,
+
+         // A callback function for add operations.  Your callback must accept two string arguments:
+         // arg1:  the id attribute of the added row
+         // arg2:  the name attribute of the added row
+         addCallback         : null,
+
+         // A callback function for remove operations.  Your callback must accept three string arguments:
+         // arg1:  the id attribute of the removed row
+         // arg2:  the name attribute of the removed row
+         // arg3:  the value of the removed row
+         removeCallback      : null
       }, options );
 
+      if( this.length === 0 || this == null ) {
+         throwException( "No matching field(s) found" );
+      }
+
       var ID_PREFIX = this.attr( "id" ).replace( /\[?[0-9]*\]?$/, "" );
       var IS_NUMBERED_NOTATION = this.attr( "id" ).match( /[0-9]+$/ ) != null;
       var IS_ARRAY_NOTATION    = this.attr( "id" ).match( /\[[0-9]\]$/ ) != null;
@@ -213,6 +228,10 @@
 
          newRow.insertAfter( lastRow );
 
+         if( typeof settings.addCallback === "function" ) {
+            settings.addCallback( nextIdResults.nextId, nextIdResults.nextId );
+         }
+
          return nextIdResults.nextId;
       }
 
@@ -239,7 +258,10 @@
       function removeRow( button ) {
          var rowToRemove = button.parent();
          var prevRow = rowToRemove.prev();
-         var inputId = rowToRemove.children( "input" ).attr( "id" );
+         var inputToRemove = rowToRemove.children( "input" );
+         var inputToRemoveVal = inputToRemove.val();
+         var inputId = inputToRemove.attr( "id" );
+         var inputName = inputToRemove.attr( "name" );
 
          // Don't remove the row if it's the only/last one in the group.
 
@@ -264,7 +286,11 @@
             rowToRemove.remove();
             rebuild();
          } else {
-            $( escape("#" + inputId) ).val( "" );
+            inputToRemove.val( "" );
+         }
+
+         if( typeof settings.removeCallback === "function" ) {
+            settings.removeCallback( inputId, inputName, inputToRemoveVal );
          }
       }
 
diff --git a/jquery.addremovetextbox.min.js b/jquery.addremovetextbox.min.js

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`/*`
`2`		`- * AddRemoveTextbox v1.1.2`
	`2`	`+ * AddRemoveTextbox v1.2`
`3`	`3`	`* https://www.github.com/kloverde/jquery-AddRemoveTextbox`
`4`	`4`	`*`
`5`	`5`	`* Donations: https://paypal.me/KurtisLoVerde/5`