dubfriend / jquery.repeater Goto Github PK

javascript error if using an <input> tag without a type attribute.

Since the browser tends to default to a type="text" in this case, It would be nice if jquery.repeater also defaulted to type="text"

Is there a way for the repeater to also repeat labels with their corresponding checkboxes?

<input type="checkbox" id="myCheckbox[0]"><label for="myCheckbox[0]"></label>

repeated to

<input type="checkbox" id="myCheckbox[1]"><label for="myCheckbox[1]"></label>

First of all great work thank you,

I was wondering is there any support and example using bootstrap tabs. So each time creating new group, form will be more tidy.
Thanks

Hello,

I am looking to assign the newly generated id to the name field.

Right now i am assigning that value to a randomly generated number.

Instead of assigning id to random I want to assign it the newly generated name.

Here is my show method:

show: function (){
    $(this).slideDown();
    var random = Math.random();
    // Instead of assigning id to random I want to assign it to the newly generated name
    $(this).find('[id]').attr('id', random);
    $(this).show();

    $('.date-picker').datepicker({
    rtl: App.isRTL(),
    orientation: "left",
    autoclose: true
    });
},

Hello, thanks for the plugin. I hope I am adding this issue correctly so if there are any issues please let me know.

I have been toying with an odd issue when mixing deep nested repeaters (repeater->nested->nested) with the fairly recent setList option that was implemented. The issue arises after setting the list a duplicate of the inner repeater is appearing inside itself.

I've put together a pen to demonstrate:

http://codepen.io/anon/pen/pEYdxZ

You will see in the example that the inner repeater "trousers" appears twice (below itself).

The code is all copied straight from the github readme page but is it possible that I have something wrong with my HTML / setList?

Thanks.

It seems that when I click the data-repeater-create button, the data-repeater-item that was cloned (the first one) has it's checked attribute cleared. Happens with latest Firefox and Chrome.

Even when I use multiple select element which uses name as name="names[]", I can't get array value from posted parameters.

I checked this element using chrome developer tool. [] was removed.

I think select[multiple] condition is needed in bellow line:
https://github.com/DubFriend/jquery.repeater/blob/master/jquery.repeater.js#L741-L742

Hello! Is it possible to make chaining like this?
Repeater -> nested repeaters -> nested repeater

Just wondering if there's a mechanism in place for hiding the delete button for items containing a specific class or data value. I have a use case which includes several items that need to persist in addition to any extra values a user might want to add.

I can dig through the library to answer this question, but on the off chance that you save me the time of looking, or doing something custom myself. :)

Imagine I have a form named vehicles and I should have 2 repeater lists: trucks and cars. But when I create them, the second one's buttons (add and delete) are not working properly. Please help to fix it a.s.a.p. My project is depending on your help!

When I put enctype="multipart/form-data" to the form and try to pass something like this:

this is what I get in backend:

array (size=5)
  'name' => 
    array (size=2)
      0 => 
        array (size=1)
          'doc' => string 'gitignore_global.txt' (length=20)
      1 => 
        array (size=1)
          'doc' => string 'hgignore_global.txt' (length=19)
  'type' => 
    array (size=2)
      0 => 
        array (size=1)
          'doc' => string 'text/plain' (length=10)
      1 => 
        array (size=1)
          'doc' => string 'text/plain' (length=10)
  'tmp_name' => 
    array (size=2)
      0 => 
        array (size=1)
          'doc' => string 'C:\wamp\tmp\phpB7E7.tmp' (length=23)
      1 => 
        array (size=1)
          'doc' => string 'C:\wamp\tmp\phpB7E8.tmp' (length=23)
  'error' => 
    array (size=2)
      0 => 
        array (size=1)
          'doc' => int 0
      1 => 
        array (size=1)
          'doc' => int 0
  'size' => 
    array (size=2)
      0 => 
        array (size=1)
          'doc' => int 236
      1 => 
        array (size=1)
          'doc' => int 173

My other field is lost (description) too.

Here is HTML:

<form method="post" enctype="multipart/form-data">
            <div data-repeater-list="documents">
                    <div class="row" data-repeater-item>
                        <div class="col-xs-5">
                            <div class="form-group">
                                <label>Document:</label>
                                <input type="file" name="doc" value=""
                                       class=""/>
                            </div>
                        </div>
                        <div class="col-xs-5">
                            <div class="form-group">
                                <label>Description:</label>
                                <input type="text" name="description" value=""
                                       class="form-control"/>
                            </div>
                        </div>
                        <div class="col-xs-2 text-right">
                            <label>&nbsp;</label>

                            <div>
                                <a data-repeater-delete class="btn btn-danger"><i class="fa fa-times"></i></a>
                            </div>
                        </div>
                        <input class="hidden" type="hidden" name="id" />
                    </div>
            </div>
</form>

Hi

I've set up a two-level repeater (top level are 'questions', inner level are 'choices'). All is working well except for one thing: when you click an Add Choice or Delete Choice button on any question apart from the first one, it correctly adds or deletes the choice, but then jumps to the top of the screen. So you then have to scroll back down to the correct place every time (which in my case is below lots of other stuff, so it's a lot of jumping about and scrolling).

The same thing happens with Delete Question, again it's for any question except the first one.

The Add Question button is fine.

Hey,

I have an issue with the "data-repeater-create" button - it doesn't work if I put it anywhere inside the repeater other than as a direct child of the repeater. I am trying to create a certain table-style layout and have the add button like this:

The output should look something like this:

I presume it's because the repeater is looking for the create button only as a direct child. Perhaps make it find it anywhere inside the repeater?

I wanted to take advantage of repeaterVal() so I dropped in the latest version from this repo. Prior to that I had the plugin working fine using the older version on the jQuery website.

Everything works fine with the new version except the data-repeater-create button no longer creates any repeating items. Everything else looks to be working: it's renaming the name attributes fine and I can delete the first row using data-repeater-delete. And it's throwing no console errors.

Have you come across this issue before?

I just want repeat 5 inputs field. So, how can i set in the js code? Please help me, tks.

I'm using this repeater and realy like it. But i'm trying to add data to the repeater dynamicly (using javascript) in a sort of edit screen. But I can't figure out how to do it. Is there build in functionality to do this?

Thanks for providing awesome plugin. Following is the small issue with checkboxes inside the form.

Can you please help this plugin to work with JQuery Uniform Plugin ( http://uniformjs.com/ )

When page loads and if we apply JQuery Uniform Plugin, the initial set of checkboxes which were available as part of page load work fine. At this time additional class is applied to checkboxes as 'class="checker"'

But then when new rows are added, since these are created using first row as basis, since checkboxes in first row already had 'class="checker"' class applied to them, JQuery Uniform Plugin is not being applied to new rows added.

Can you please help resolve this issue, since almost all web applications use JQuery Uniform Plugin for checkboxes.

Thanks

fyi: I am regular user of "JQuery Uniform Plugin" and have no affiliation with the author of "JQuery Uniform Plugin".

Hello,

The repeater does have a problem related to ajax everytime I call it in ajax it does reinitialize how to destroy it ?

I am using your plugin for outer and inner repeater and its working great. But in my inner repeater edit case its showing me the inner-repeater first loop elements. Although its working fine in the create process. Can you please let me know where I am doing mistake or what i am doing wrong.

`

        <div class="option-value">
            <div class="form-group">
                <div class='row' >

                    <div class='col-md-6'>
                        {{Form::label('scope', 'Scope')}}
                        {{ Form::select('scope',$scope,$question->scope,['class'=>'form-control']) }}
                    </div>
                    <div class='col-md-6'>
                        {{Form::label('type', 'Type')}}
                        {{ Form::select('type',$type,$question->type,['class'=>'form-control type']) }}
                    </div>

                </div> <!-- row -->
            </div>


            <!--Text value repeater start-->  


            <div class="inner-repeater">
                <div data-repeater-list="options"> 
                      <div data-repeater-item>
                        <div class="form-group">
                        <div class="row">

                                <div class="col-md-6">
                                    {{Form::label('text','Text')}}
                                    {{Form::text('text',null,['class'=>'form-control'])}}
                                </div>
                                <div class="col-md-5">
                                    {{Form::label('value','Value')}}
                                    {{Form::text('value',null,['class'=>'form-control'])}}
                                </div>
                                <div class="col-sm-1">
                                    {{Form::label('delete', 'Delete',['class'=>'white'])}}
                                    <span data-repeater-delete="" class="btn btn-danger btn-sm">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </span>
                                </div>

                          </div> <!-- row -->

                        </div> <!-- form-group -->

                    </div>  <!-- data-repeater-list -->


                </div> <!-- Data repeater list -->
                <input data-repeater-create type="button" value="Add"/>
            </div> <!-- inner repeater -->
            <!--Text value repeater ends-->
        </div>

        <div class="form-group">
            <div class="row">
                <div class='col-md-6'>
                    {{Form::label('description', 'Description')}}
                    {{ Form::textarea('description',$question->description,['class'=>'form-control','placeholder'=>'Enter quantity']) }}
                </div>

                <div class='col-md-6'>
                    {{Form::label('extra', 'Extra')}}
                    {{ Form::textarea('extra',$question->extra,['class'=>'form-control','placeholder'=>'Enter quantity']) }}
                </div>
            </div>

         </div>


    </div> <!-- Data-repeater-item-->
    @endforeach
    @endif`

Hi, this is very nice, when I try to POST a nested collection,

• I am not getting uniquely identified attribute values with Id, this is confusing the server side while trying to bind to a model object for saving/add new and deleting.
• Also is there a template on the div row or table row, I can use to clone/append where the repeater assigns hidden attribute values to the new row, so the collection rows are uniquely indexed when POST

Thanks

Is there any way to make sure a repeater or nested repeater is initialised without any starter element? I just want the repeater to show the "Add" button and let the user decide whether he needs it or not. Currently, a set of fields is there by default.

If I have a group of repeaters on the same page, I cannot initialize them correctly with a single .repeater() call

ex:

$('selector for multiple repeaters').repeater();

instead only this works

$('selector for multiple repeaters').each(function () {
   $(this).repeater();
});

https://jsfiddle.net/yth50vsf/

Console reports:

Uncaught TypeError: Cannot read property 'set' of undefined

I am using jQuery repeater and select2.js in a project. they both are working fine separately however when i use a select2 dropdown field inside repeater the select2 dropdown field is showing but the dropdown options are not appearing thus jQuery Repeater is not working with select2.js.

it will be great if there's any fix for this issue? Thank you

there should be way to update id="some-id" values in repeated elements

I am trying to assign an attribute to the newest created element.
Here's my code:

`$('.mt-repeater').each(function(){
$(this).repeater({
isFirstItemUndeletable: true,

				show: function () {
					$(this).slideDown();

					$.ajax({
						type: "POST",
						url: ADMINURL + "/ajax/shop.couriers.php",
						dataType: 'html',
						data: {
							'generate_courier_post_zone_number': 1
						},
						cache: false,
						success: function (res) {
							if(res) {
								$(this).removeAttr('data-unicue-id');
								$(this).attr('data-unicue-id', res);
							}
						}
					});

					//Init other plugins if have here
				},

				hide: function (deleteElement) {
					if(confirm(_SHOP_COURIER_DEL_CONFIRM)) {

						var del_id = $(this).data('id');

						$.ajax({
							type: "POST",
							url: ADMINURL + "/ajax/shop.couriers.php",
							dataType: 'json',
							data: {
								'deleteCourier': del_id
							},
							success: function (res) {
								$(this).slideUp(deleteElement);
							}
						});
					}
				},

				ready: function (setIndexes) {

				}

			});
		});`

I am using this plugin and i try to get value from java script.
As per documentation i am using

$('.repeater').repeaterVal();

but i am not able to get value.
Can you please help for this?

I am using jquery.repeater version 1.1.5.

Is it possible for it to return a basic array? per say: Name[0], Name[1]

instead of Name[0][something], Name[1][Something]

Is there an option for this?

Thanks,

Is it possible to retrieve the data entered into the repeater as a nicely formatted object using only javascript, as the repeater does when the form post action occurs? If there's already an easy method, it's not documented at all and is not apparent in the code.

$('[data-repeater-list]').parent().repeater({
// options
});

This is the cleanest way I found to implement multiple repeaters on one page, might be worth adding to readme.

And if possible modify code to work without needing to target parent because if 2 repeater lists share a parent probably only the second will work.

But that aside nice plugin : )

My JS looks like this:

    $('.out_repeater').repeater({
        show: function () {
            $(this).slideDown();
        },
        hide: function (deleteElement) {
            if (confirm('Are you sure you want to delete this element?')) {
                $(this).slideUp(deleteElement);
            }
        },
        isFirstItemUndeletable: true,
        repeaters: [{
            selector: '.in_repeater',
            show: function () {
                $(this).slideDown();
            },
            hide: function (deleteElement) {
                if (confirm('Are you sure you want to delete this element?')) {
                    $(this).slideUp(deleteElement);
                }
            }
        }]
    });

For some reason when the delete button for an item inside the "in_repeater", it triggers the "Are you sure" confirmation twice.

Everything else works fine!

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>

Is there a recommended way to reset the DOM to original state? (remove additional, repeated items)

Hi, this looks like a really useful library. A question for you: will this work if I allow users to re-order the items via drag and drop (for example, with the jquery UI "sortable" plugin)? I understand that the actual drag-drop functionality isn't part of this library, but I wonder if the re-ordering would mess up the id numbers or anything like that?

Thanks!

Hello,

nice library. really easy to use. But how for example I can build TABLE tamplate?

Something like this?

<li class="repeater">
    <table data-repeater-list>
        <tr data-repeater-item>
            <td>
                <input type="text" name="name" value=""/>
            </td>
            <td>
                <input type="text" name="height" value=""/>
            </td>

            <td>
                <input type="text" name="width" value=""/>
            </td>

            <td>
                <input type="text" name="depth" value=""/>
            </td>

            <td>
                <input type="text" name="sleeping_part" value=""/>
            </td>

            <td>
                <input type="text" name="price" value=""/>
            </td>

            <input data-repeater-delete type="button" value="Delete"/>
        </tr>
    </table>
    <input data-repeater-create type="button" value="Add"/>
</li>

<script type="text/javascript">
    $(document).ready(function () {
        'use strict';
        $('.repeater').repeater({
            defaultValues: {
                'name': '',
                'height': '',
                'width': '',
                'depth': '',
                'sleeping_part': '',
                'price': '',
            },
            show: function () {
                $(this).slideDown();
            },
            hide: function (deleteElement) {
                if(confirm('Are you sure you want to delete this element?')) {
                    $(this).slideUp(deleteElement);
                }
            }
        });
    });
</script>

is it somehow configurable? Because whenever I try to change layout a bit, I get error in javascript console: Uncaught TypeError: Cannot read property 'match' of undefined

Thanks!

I'd like to suggest that you add some configuration options. In particular an option to not allow a user to delete the first item. If that option is specified then hide the first data-repeater-delete item:
$list.find('[data-repeater-item]').first().find('[data-repeater-delete]').hide();

input type "tel" throw a not a valid input type error

$('.repeater').repeaterVal() does not work, it not exist as a function in jquery.repeater.js file.

TypeError: $(...).repeaterVal is not a function

Hey again,

It seems that both for normal and nested repeaters, the labels do not get their labels automatically updated properly. Here's a DOM screenshot:

As you can see, the field has the [0] index but the label doesn't. The same happens for nested ones.

Is there a suggested way to start with 0 elements displaying, only the 'add' button?

Hello,

I've noticed that when I use setList to load my form elements subsequently adding a repeater item via the "add" button (data-repeater-create) creates 2 additional items instead of one.

This only happens when I use setList. Any ideas what could be causing this to happen?

Thanks.

I extensively use data-repeater in a current project and I recently hit a problem
I'm trying to use a data-repeater-list as inner element of of data-repeater-list , and this results in a really strange behaviour.

here is a crude example that illustrate the problem using jquery-2.1.4, jquery.repeater-0.1.5, bootstrap-3.3.5
I was expecting to have leaf repeated when using "add leaf" button
and to have the ohle "node" definition repeated when using "add node"

result is a mix of that and provide differents results given the number of previous repeat operation performed previously

I don't see any possibility to bind specific data-repeater-list to an action add//delete.

regards

Eric

<body>
<div class="container">
    <fieldset>
        <div class="repeater-top">
            <div data-repeater-list="top">
                <div data-repeater-item>
                    <div class="form-group">
                        <div class="col-sm-12">
                            <label class="col-sm-2 control-label">node</label>

                            <div class="col-sm-6">
                                <input type="text" name="node" class="form-control"/>
                            </div>

                            <div class="col-sm-2">
                                <span data-repeater-delete class="btn btn-danger btn-sm">
                                    <span class="glyphicon glyphicon-remove"></span> Delete node
                                </span>
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="col-sm-2"></div>
                            <div class="col-sm-10">
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <div class="repeater-nested">
                                        <div data-repeater-list="inner">
                                            <div data-repeater-item>
                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label">leaf</label>
                                                        <div class="col-sm-6">
                                                            <input type="text" name="leaf" class="form-control"/>
                                                        </div>
                                                        <div class="col-sm-2">
                                                           <span data-repeater-delete class="btn btn-danger btn-sm">
                                                               <span class="glyphicon glyphicon-remove"></span> Delete leaf
                                                           </span>
                                                        </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-offset-1 col-sm-11">
                                                <span data-repeater-create class="btn btn-info btn-md">
                                                    <span class="glyphicon glyphicon-plus"></span> Add leaf
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-1 col-sm-11">
                    <span data-repeater-create class="btn btn-info btn-md">
                        <span class="glyphicon glyphicon-plus"></span> Add node
                    </span>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-1 col-sm-11">
                <input type="submit" value="Submit" class="btn btn-primary btn-lg"/>
            </div>
        </div>
    </fieldset>
</div>

<script type="text/javascript">
    jQuery(document).ready(function () {
        'use strict';
        jQuery('.repeater-top').repeater();
        jQuery('.repeater-nested').repeater();
    });
</script>

.repeaterVal() doesn't get HTML5 elements like <input type="number" />

Hello,

Thanks for such useful plugin, it's very easy to use. In my current setup I have added the ability to drag & drop the repeater items and it works fine, the only issue is that the index is messed up. I've read the already closed issue #9 but I'm not able to understand how to call the reset index functionality from the drag & drop script.

I'm using jquery sortable for the drag and drop functionality:

jQuery(".repeater-table").sortable({
    axis: "y",
    cursor: 'pointer',
    opacity: 0.5,
    placeholder: "row-dragging",
    delay: 150,
    handle: ".sort-option",
    update: function(event, ui) {
        // stuff to do on sorting update.
    }

}).disableSelection();

And this is the repeater function

jQuery('.wpumcf-field-repeater-options').repeater({
    show: function() {
        jQuery(this).slideDown();

        jQuery('.repeater-wrapper').animate({
            scrollTop: jQuery('.repeater-table').height()
        }, 300);
    },
    hide: function(deleteElement) {
        if (confirm(wpum_admin_js.confirm)) {
            jQuery(this).slideUp(deleteElement);
        }
    },
    ready: function(setIndexes) {
        $dragAndDrop.on('drop', setIndexes);
    },
    isFirstItemUndeletable: true
});

Have you got any example on how to call the reset functionality from another script ?

Thank you.

Hello,

I'm having a problem with the repeater which lies in
this option : isFirstItemUndeletable
when I activate the nested repeater it no longer works. it doesn't work on nested elements

Regards

I'm utilizing your plugin right now and upon form submit, it checks form validation. If the form is invalid, it returns to the page and shows the errors. I wanted to ask, if the user uses the repeater and repeats the item 5 times, is there a function available where I can just have the repeater repeat the item 5 times on load so I can just fill in the old data in the proper spots?

No render select with select2
https://select2.github.io/

Hi, We have problem working with Select2 using jquery Repeater.

When clicking on button "Add" to repeat the form, the select2 dropdown is not working it's not initialised. how we can do this ?

Hello,
I would like to send the form data via ajax when the value of a field changes, so the user doesn't have to submit the form. For some reason I'm not able to make the repeaterVal function work. I always get the same error, repeaterVal is not a function.
I'm using version 0.1.5 with jQuery 1.11.3

Is it possible to do something like this?

jQuery('.single-field').live('change keyup',function(){ 
var values = jQuery('.repeater').repeaterVal();
});

Thank you!

Hey man :)

Is there any way to pull the repeater that is being affected on show and on hide? I am trying to create a script that does a scroll animation to the top of the repeater when an element is added or removed. I tried passing a variable as a parameter to the show and hide functions but it didn't work.

Cheers!
Alexandru