Pass the added row to js event

Author: unclead

CHANGELOG.md

@@ -1,6 +1,11 @@
 Yii2 multiple input change log
 ==============================
 
+2.8.2
+=====
+
+- Pass the added row to `afterAddRow` event
+
 2.8.1
 =====
 

README.md

@@ -8,7 +8,7 @@ Yii2 widget for handle multiple inputs for an attribute of model and tabular inp
 [![License](https://poser.pugx.org/unclead/yii2-multiple-input/license)](https://packagist.org/packages/unclead/yii2-multiple-input)
 
 ## Latest release
-The latest stable version of the extension is v2.8.1 Follow the [instruction](./UPGRADE.md) for upgrading from previous versions
+The latest stable version of the extension is v2.8.2 Follow the [instruction](./UPGRADE.md) for upgrading from previous versions
 
 ## Installation
 The preferred way to install this extension is through [composer](http://getcomposer.org/download/).

composer.json

@@ -9,7 +9,7 @@
         "yii2 tabular input"
     ],
     "type": "yii2-extension",
-    "version": "2.8.1",
+    "version": "2.8.2",
     "license": "BSD-3-Clause",
     "support": {
         "issues": "https://github.com/unclead/yii2-multiple-input/issues?state=open",

examples/views/multiple-input.php

@@ -5,7 +5,6 @@
 use unclead\multipleinput\examples\models\ExampleModel;
 use yii\helpers\Html;
 use unclead\multipleinput\MultipleInputColumn;
-use yii\widgets\MaskedInput;
 
 // Note: You have to install https://github.com/kartik-v/yii2-widget-datepicker for correct work an example
 use kartik\date\DatePicker;
@@ -24,25 +23,25 @@
 
 <h3>Single column</h3>
 <?php
-//    echo $form->field($model, 'emails')->widget(MultipleInput::className(), [
-//        'max'  => 6,
-//        'allowEmptyList' => false,
-//        'columns' => [
-//            [
-//                'name' => 'emails',
-//                'options' => [
-//                    'placeholder' => 'E-mail'
-//                ]
-//            ]
-//        ],
-//        'min'  => 2, // should be at least 2 rows
-//        'addButtonPosition' => [
-//            MultipleInput::POS_HEADER,
-//            MultipleInput::POS_FOOTER,
-//            MultipleInput::POS_ROW
-//        ]
-//    ])
-//    ->label(false);
+    echo $form->field($model, 'emails')->widget(MultipleInput::className(), [
+        'max'  => 6,
+        'allowEmptyList' => false,
+        'columns' => [
+            [
+                'name' => 'emails',
+                'options' => [
+                    'placeholder' => 'E-mail'
+                ]
+            ]
+        ],
+        'min'  => 2, // should be at least 2 rows
+        'addButtonPosition' => [
+            MultipleInput::POS_HEADER,
+            MultipleInput::POS_FOOTER,
+            MultipleInput::POS_ROW
+        ]
+    ])
+    ->label(false);
 ?>
 
 <h3>Multiple columns</h3>
@@ -89,7 +88,7 @@
         ],
         [
             'name'  => 'day',
-            'type'  => MaskedInput::className(),
+            'type'  => DatePicker::className(),
             'title' => 'Day',
             'value' => function($data) {
                 return $data['day'];
@@ -99,15 +98,11 @@
                 '1' => 'Monday'
             ],
             'options' => [
-                'mask' => '99.99.9999'
-
+                'pluginOptions' => [
+                    'format' => 'dd.mm.yyyy',
+                    'todayHighlight' => true
+                ]
             ],
-//            'options' => [
-//                'pluginOptions' => [
-//                    'format' => 'dd.mm.yyyy',
-//                    'todayHighlight' => true
-//                ]
-//            ],
             'headerOptions' => [
                 'style' => 'width: 250px;',
                 'class' => 'day-css-class'
@@ -164,8 +159,8 @@
             console.log('calls on after initialization event');
         }).on('beforeAddRow', function(e) {
             console.log('calls on before add row event');
-        }).on('afterAddRow', function(e) {
-            console.log('calls on after add row event');
+        }).on('afterAddRow', function(e, row) {
+            console.log('calls on after add row event', $(row));
         }).on('beforeDeleteRow', function(e, item){
             console.log(item);
             console.log('calls on before remove row event');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery.multipleInput",
-  "version": "2.8.1",
+  "version": "2.8.2",
   "description": "jQuery multipleInput",
   "scripts": {
 	  "build": "npm install && (gulp || node node_modules/gulp/bin/gulp.js)"

src/assets/src/js/jquery.multipleInput.js

@@ -22,7 +22,7 @@
         /**
          * afterAddRow event is triggered after successful adding new row.
          * The signature of the event handler should be:
-         *     function (event)
+         *     function (event, row)
          * where event is an Event object.
          *
          */
@@ -231,8 +231,9 @@
         }
 
         template = template.replaceAll('{' + settings.indexPlaceholder + '}', data.currentIndex);
+        var $addedInput = $(template);
 
-        $(template).hide().appendTo(inputList).fadeIn(300);
+        $addedInput.hide().appendTo(inputList).fadeIn(300);
 
         if (values instanceof Object) {
             var tmp = [];
@@ -290,7 +291,7 @@
         $wrapper.data('multipleInput').currentIndex++;
 
         var event = $.Event(events.afterAddRow);
-        $wrapper.trigger(event);
+        $wrapper.trigger(event, [$addedInput]);
     };
 
     var removeInput = function ($btn) {