Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
Brian Detering authored and Brian Detering committed Dec 7, 2015
2 parents 002a62a + c1b6ace commit abd1acf
Show file tree
Hide file tree
Showing 16 changed files with 850 additions and 193 deletions.
49 changes: 48 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ Names get reindexed if an item is added or deleted.
The value given to the data-repeater-list attribute will be used as the
base of rewritten name attributes. In this example, the first
data-repeater-item's name attribute would become group-a[0][text-input],
and the second data-repeater-item woulc become group-a[1][text-input]
and the second data-repeater-item would become group-a[1][text-input]
-->
<div data-repeater-list="group-a">
<div data-repeater-item>
Expand Down Expand Up @@ -93,6 +93,53 @@ Names get reindexed if an item is added or deleted.
</script>
```

## Nested Example

```html
<!-- outer repeater -->
<form class="repeater">
<div data-repeater-list="outer-list">
<div data-repeater-item>
<input type="text" name="text-input" value="A"/>
<input data-repeater-delete type="button" value="Delete"/>

<!-- innner repeater -->
<div class="inner-repeater">
<div data-repeater-list="inner-list">
<div data-repeater-item>
<input type="text" name="inner-text-input" value="B"/>
<input data-repeater-delete type="button" value="Delete"/>
</div>
</div>
<input data-repeater-create type="button" value="Add"/>
</div>

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

<script src="path/to/jquery.js"></script>
<script src="path/to/jquery.repeater/jquery.repeater.js"></script>
<script>
$(document).ready(function () {
$('.repeater').repeater({
// (Required if there is a nested repeater)
// Specify the configuration of the nested repeaters.
// Nested configuration follows the same format as the base configuration,
// supporting options "defaultValues", "show", "hide", etc.
// Nested repeaters additionally require a "selector" field.
repeaters: [{
// (Required)
// Specify the jQuery selector for this nested repeater
selector: '.inner-repeater'
}]
});
});
</script>
```


## repeaterVal

Get a structured object of repeater values, without submitting the form.
Expand Down
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "jquery.repeater",
"main": "jquery.repeater.js",
"version": "1.1.0",
"version": "1.1.3",
"homepage": "https://github.com/DubFriend/jquery.repeater",
"description": "repeatable form input interface",
"keywords": [
Expand Down
70 changes: 48 additions & 22 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
</style>
</head>
<body>
<h1>Repeater</h1>
<form action="echo.php" class="repeater">
<h2>Repeater</h2>
<form action="echo.php" class="repeater" enctype="multipart/form-data">
<div data-repeater-list="group-a">
<div data-repeater-item>
<input name="untyped-input" value="A"/>
Expand Down Expand Up @@ -73,32 +73,34 @@ <h1>Repeater</h1>
<input data-repeater-create type="button" value="Add"/>
</form>

<h2>Nested</h2>
<form action="echo.php" class="outer-repeater">
<div data-repeater-list="outer-group">
<div data-repeater-item>
<input type="text" name="text-input" value="A"/>
<input data-repeater-delete type="button" value="Delete"/>

<div class="inner-repeater">
<div data-repeater-list="inner-group">
<div data-repeater-item>
<input type="text" name="inner-text-input" value="B"/>
<input data-repeater-delete type="button" value="Delete"/>
</div>
</div>
<input data-repeater-create type="button" value="Add"/>
</div>

</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>
$(document).ready(function () {
'use strict';

// $('.repeater').repeater(function () {
// return {
// defaultValues: {
// 'textarea-input': 'foo',
// 'text-input': 'bar',
// 'select-input': 'B',
// 'checkbox-input': ['A', 'B'],
// 'radio-input': 'B'
// },
// show: function () {
// $(this).slideDown();
// },
// hide: function (deleteElement) {
// if(confirm('Are you sure you want to delete this element?')) {
// $(this).slideUp(deleteElement);
// }
// }
// };
// });

$('.repeater').repeater({
defaultValues: {
'textarea-input': 'foo',
Expand All @@ -119,6 +121,30 @@ <h1>Repeater</h1>

}
});

$('.outer-repeater').repeater({
defaultValues: { 'text-input': 'outer-default' },
show: function () {
console.log('outer show');
$(this).slideDown();
},
hide: function (deleteElement) {
console.log('outer delete');
$(this).slideUp(deleteElement);
},
repeaters: [{
selector: '.inner-repeater',
defaultValues: { 'inner-text-input': 'inner-default' },
show: function () {
console.log('inner show');
$(this).slideDown();
},
hide: function (deleteElement) {
console.log('inner delete');
$(this).slideUp(deleteElement);
}
}]
});
});
</script>
</body>
Expand Down
48 changes: 27 additions & 21 deletions index.pre.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,34 +12,16 @@
</style>
</head>
<body>
<h1>Repeater</h1>
<h2>Repeater</h2>
<!-- @include repeater.html -->
<h2>Nested</h2>
<!-- @include nested-repeater.html -->
<script src="jquery-1.11.1.js"></script>
<script src="jquery.repeater.js"></script>
<script>
$(document).ready(function () {
'use strict';

// $('.repeater').repeater(function () {
// return {
// defaultValues: {
// 'textarea-input': 'foo',
// 'text-input': 'bar',
// 'select-input': 'B',
// 'checkbox-input': ['A', 'B'],
// 'radio-input': 'B'
// },
// show: function () {
// $(this).slideDown();
// },
// hide: function (deleteElement) {
// if(confirm('Are you sure you want to delete this element?')) {
// $(this).slideUp(deleteElement);
// }
// }
// };
// });

$('.repeater').repeater({
defaultValues: {
'textarea-input': 'foo',
Expand All @@ -60,6 +42,30 @@ <h1>Repeater</h1>

}
});

$('.outer-repeater').repeater({
defaultValues: { 'text-input': 'outer-default' },
show: function () {
console.log('outer show');
$(this).slideDown();
},
hide: function (deleteElement) {
console.log('outer delete');
$(this).slideUp(deleteElement);
},
repeaters: [{
selector: '.inner-repeater',
defaultValues: { 'inner-text-input': 'inner-default' },
show: function () {
console.log('inner show');
$(this).slideDown();
},
hide: function (deleteElement) {
console.log('inner delete');
$(this).slideUp(deleteElement);
}
}]
});
});
</script>
</body>
Expand Down
Loading

0 comments on commit abd1acf

Please sign in to comment.