Skip to content

Commit

Permalink
closes #12
Browse files Browse the repository at this point in the history
  • Loading branch information
Brian Detering authored and Brian Detering committed Nov 7, 2015
1 parent 26a44e9 commit 2d3868f
Show file tree
Hide file tree
Showing 11 changed files with 71 additions and 25 deletions.
3 changes: 2 additions & 1 deletion .gitignore
@@ -1,2 +1,3 @@
node_modules
bower_components
bower_components
.DS_Store
2 changes: 1 addition & 1 deletion README.md
Expand Up @@ -17,7 +17,7 @@ Repeater rewrites your name attributes to avoid collisions within the same form.
(since the name attributes will be repeated). In the example below, the
name attributes would be renamed `group-a[0][text-input]` and `group-a[1][text-input]`.

Checkbox inputs will have an additional `[]` appended. So for example a checkbox
Checkbox inputs and Multiple Select inputs will have an additional `[]` appended. So for example a checkbox
with name `foo` would be mapped to `group-a[0][foo][]`.

Names get reindexed if an item is added or deleted.
Expand Down
15 changes: 12 additions & 3 deletions index.html
Expand Up @@ -13,7 +13,6 @@
</head>
<body>
<h1>Repeater</h1>

<form action="echo.php" class="repeater">
<div data-repeater-list="group-a">
<div data-repeater-item>
Expand All @@ -36,6 +35,11 @@ <h1>Repeater</h1>
<option value="B">B</option>
</select>

<select name="multiple-select-input" multiple>
<option value="A" selected>A</option>
<option value="B" selected>B</option>
</select>

<input data-repeater-delete type="button" value="Delete"/>
</div>
<div data-repeater-item>
Expand All @@ -57,13 +61,18 @@ <h1>Repeater</h1>
<option value="A">A</option>
<option value="B" selected>B</option>
</select>

<select name="multiple-select-input" multiple>
<option value="A" selected>A</option>
<option value="B" selected>B</option>
</select>

<input data-repeater-delete type="button" value="Delete"/>
</div>
</div>
<input data-repeater-create type="button" value="Add"/>
</form>


<script src="jquery-1.11.1.js"></script>
<script src="jquery.repeater.js"></script>
<script>
Expand Down Expand Up @@ -107,7 +116,7 @@ <h1>Repeater</h1>
}
},
ready: function (setIndexes) {

}
});
});
Expand Down
4 changes: 1 addition & 3 deletions index.pre.html
Expand Up @@ -13,9 +13,7 @@
</head>
<body>
<h1>Repeater</h1>

<!-- @include repeater.html -->

<script src="jquery-1.11.1.js"></script>
<script src="jquery.repeater.js"></script>
<script>
Expand Down Expand Up @@ -59,7 +57,7 @@ <h1>Repeater</h1>
}
},
ready: function (setIndexes) {

}
});
});
Expand Down
4 changes: 2 additions & 2 deletions jquery.repeater.js
@@ -1,6 +1,6 @@
// jquery.repeater version 1.1.0
// https://github.com/DubFriend/jquery.repeater
// (MIT) 19-09-2015
// (MIT) 07-11-2015
// Brian Detering <BDeterin@gmail.com> (http://www.briandetering.net/)
(function ($) {
'use strict';
Expand Down Expand Up @@ -739,7 +739,7 @@ $.fn.repeater = function(fig) {
$(this).attr('name');

var newName = groupName + '[' + index + '][' + name + ']' +
($(this).is(':checkbox') ? '[]' : '');
($(this).is(':checkbox') || $(this).attr('multiple') ? '[]' : '');

$(this).attr('name', newName);
});
Expand Down
4 changes: 2 additions & 2 deletions jquery.repeater.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
@@ -1,6 +1,6 @@
{
"name": "jquery.repeater",
"version": "1.1.0",
"version": "1.1.1",
"description": "repeatable form input interface",
"main": "jquery.repeater.js",
"directories": {
Expand Down
11 changes: 11 additions & 0 deletions repeater.html
Expand Up @@ -20,6 +20,11 @@
<option value="B">B</option>
</select>

<select name="multiple-select-input" multiple>
<option value="A" selected>A</option>
<option value="B" selected>B</option>
</select>

<input data-repeater-delete type="button" value="Delete"/>
</div>
<div data-repeater-item>
Expand All @@ -41,6 +46,12 @@
<option value="A">A</option>
<option value="B" selected>B</option>
</select>

<select name="multiple-select-input" multiple>
<option value="A" selected>A</option>
<option value="B" selected>B</option>
</select>

<input data-repeater-delete type="button" value="Delete"/>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/repeater.js
Expand Up @@ -40,7 +40,7 @@ $.fn.repeater = function(fig) {
$(this).attr('name');

var newName = groupName + '[' + index + '][' + name + ']' +
($(this).is(':checkbox') ? '[]' : '');
($(this).is(':checkbox') || $(this).attr('multiple') ? '[]' : '');

$(this).attr('name', newName);
});
Expand Down
11 changes: 11 additions & 0 deletions test/index.html
Expand Up @@ -33,6 +33,11 @@
<option value="B">B</option>
</select>

<select name="multiple-select-input" multiple>
<option value="A" selected>A</option>
<option value="B" selected>B</option>
</select>

<input data-repeater-delete type="button" value="Delete"/>
</div>
<div data-repeater-item>
Expand All @@ -54,6 +59,12 @@
<option value="A">A</option>
<option value="B" selected>B</option>
</select>

<select name="multiple-select-input" multiple>
<option value="A" selected>A</option>
<option value="B" selected>B</option>
</select>

<input data-repeater-delete type="button" value="Delete"/>
</div>
</div>
Expand Down
38 changes: 27 additions & 11 deletions test/test.js
Expand Up @@ -26,8 +26,8 @@ var generateNameMappedInputValues = function (group, index, defaultValue, overri
defaultObject['group-' + group + '[' + index + '][textarea-input]'] = defaultValue;
defaultObject['group-' + group + '[' + index + '][select-input]'] = defaultValue || null;
defaultObject['group-' + group + '[' + index + '][radio-input]'] = defaultValue || null;

defaultObject['group-' + group + '[' + index + '][checkbox-input][]'] = defaultValue ? [defaultValue] : [];
defaultObject['group-' + group + '[' + index + '][multiple-select-input][]'] = defaultValue ? [defaultValue] : [];
return $.extend(defaultObject, override || {});
};

Expand All @@ -37,6 +37,7 @@ QUnit.test('add item', function (assert) {
this.$addButton.click();
var $items = this.$repeater.find('[data-repeater-item]');
assert.strictEqual($items.length, 3, 'adds a third item to list');

assert.deepEqual(
getNamedInputValues($items.last()),
generateNameMappedInputValues('a', 2, ''),
Expand All @@ -45,7 +46,9 @@ QUnit.test('add item', function (assert) {

assert.deepEqual(
getNamedInputValues($items.first()),
generateNameMappedInputValues('a', 0, 'A'),
generateNameMappedInputValues('a', 0, 'A', {
"group-a[0][multiple-select-input][]": ['A', 'B']
}),
'does not clear other inputs'
);

Expand Down Expand Up @@ -80,7 +83,9 @@ QUnit.test('second repeater add item', function (assert) {

assert.deepEqual(
getNamedInputValues($items.first()),
generateNameMappedInputValues('b', 0, 'A'),
generateNameMappedInputValues('b', 0, 'A', {
"group-b[0][multiple-select-input][]": ['A', 'B']
}),
'does not clear other inputs'
);

Expand Down Expand Up @@ -109,21 +114,28 @@ QUnit.test('multiple add buttons', function (assert) {

assert.deepEqual(
getNamedInputValues($items.first()),
generateNameMappedInputValues('a', 0, 'A'),
generateNameMappedInputValues('a', 0, 'A', {
"group-a[0][multiple-select-input][]": ['A', 'B']
}),
'does not clear other inputs'
);
});

QUnit.test('add item with default values and rewrite names', function (assert) {
this.$repeater.repeater({
defaultValues: { 'text-input': 'foo', 'checkbox-input': ['A', 'B'] }
defaultValues: {
'text-input': 'foo',
'checkbox-input': ['A', 'B'],
"multiple-select-input": ['B']
}
});
this.$addButton.click();
assert.deepEqual(
getNamedInputValues(this.$repeater.find('[data-repeater-item]').last()),
generateNameMappedInputValues('a', 2, '', {
'group-a[2][text-input]': 'foo',
'group-a[2][checkbox-input][]' : ['A', 'B']
'group-a[2][checkbox-input][]' : ['A', 'B'],
"group-a[2][multiple-select-input][]": ['B']
})
);
});
Expand All @@ -137,7 +149,9 @@ QUnit.test('delete item', function (assert) {
);
assert.deepEqual(
getNamedInputValues(this.$repeater),
generateNameMappedInputValues('a', 0, 'B'),
generateNameMappedInputValues('a', 0, 'B', {
"group-a[0][multiple-select-input][]": ['A', 'B']
}),
'second input remains and reindexed as first element'
);
});
Expand All @@ -156,7 +170,9 @@ QUnit.test('delete item that has been added', function (assert) {
);
assert.deepEqual(
getNamedInputValues(this.$repeater.find('[data-repeater-item]').last()),
generateNameMappedInputValues('a', 1, 'B'),
generateNameMappedInputValues('a', 1, 'B', {
"group-a[1][multiple-select-input][]": ['A', 'B']
}),
'second input remains'
);
});
Expand Down Expand Up @@ -185,7 +201,9 @@ QUnit.asyncTest('custom hide callback', function (assert) {
assert.strictEqual($(this).length, 1, 'has one element');
assert.deepEqual(
getNamedInputValues($(this)),
generateNameMappedInputValues('a', 0, 'A'),
generateNameMappedInputValues('a', 0, 'A',{
"group-a[0][multiple-select-input][]": ['A', 'B']
}),
'"this" is set to first element'
);
assert.strictEqual(
Expand Down Expand Up @@ -226,8 +244,6 @@ QUnit.asyncTest('has ready callback option and setIndexes', function (assert) {
return $(this).attr('name').match(/\[([0-9])+\]/)[1];
}).get();

console.log(indeces[0], indeces[10]);

assert.strictEqual(indeces[0], '0');
assert.strictEqual(indeces[10], '1');

Expand Down

0 comments on commit 2d3868f

Please sign in to comment.