Using setList causes repeater to add 2 data-repeater-items at a time instead of 1

[maparaschivei]

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.

[maparaschivei]

Okay,

It appears for some reason the click event for [data-repeater-create] is fired twice so it adds 2 additional repeater items per click of the "add" button. I am not sure why this happens only when setList is used. Could be related to "event bubbling" due to how setList works.

In any case I have a solution that fixes this issue for me. It shouldn't break anything but I haven't done any exhaustive testing.

In jquery.repeater.js we have to make the following changes:

Before:

$filterNested($self.find('[data-repeater-create]'), fig.repeaters).click(function () {
	addItem();
});

After:

+ $filterNested($self.find('[data-repeater-create]'), fig.repeaters).click(function (event) {
	addItem();
+	event.stopImmediatePropagation();	
});

[fluctusz]

again, thanks.

[agengdp]

Thank you, you save my life 💃

[mayeenulislam]

DIG DOWN THE PROBLEM

I found the issue happened when we do something like below:

// Initiate repeater
$('.my-repeater').repeater({
      // whatever
});

// Set the data
var my_repeater = $('.my-repeater').repeater();
my_repeater.setList([
      { 'input_name': 'foo-1' },
      { 'input_name': 'foo-2' }
]);

PROBLEM

The problem is on this line: var my_repeater = $('.my-repeater').repeater();
We're re-instantiating the same .repeater().

SOLUTION

I found the correct method of calling setList() is:

// Initiate the repeater and set a variable
var my_repeater = $('.my-repeater').repeater({
      // whatever
});

// Set the data on the previous repeater on edit mode
if( true === edit_mode ) {
      my_repeater.setList([
            { 'input_name': 'foo-1' },
            { 'input_name': 'foo-2' }
      ]);
}

So, in this way, there's no need to edit the library core file.

[killerkrish]

var repeater = $('.repeater').repeater();
repeater.setList([
{
'text-input': 'set-a',
'inner-group': [{
"outer-group": [
{
"text-input": "A",
"service-type": "food",
"inner-group": [
{
"inner-text-input": "B",
"vendor-type": "conduct",
"vendor-name": "fathima",
"vendor-cost": "25"
}
]
}
]
}]
},
{ 'text-input': 'set-foo' }
]);

[killerkrish]

I used nested so i am not getting the value

[jigapate]

Is this code setList to set data which are fetched from the server? I have a case where I need to use repeater where it should show multiple added data in the repeater, the reverse of the form.

[chikhalifa]

how do you set a variable here

DIG DOWN THE PROBLEM

I found the issue happened when we do something like below:

// Initiate repeater
$('.my-repeater').repeater({
      // whatever
});

// Set the data
var my_repeater = $('.my-repeater').repeater();
my_repeater.setList([
      { 'input_name': 'foo-1' },
      { 'input_name': 'foo-2' }
]);

PROBLEM

The problem is on this line: var my_repeater = $('.my-repeater').repeater(); We're re-instantiating the same .repeater().

SOLUTION

I found the correct method of calling setList() is:

// Initiate the repeater and set a variable
var my_repeater = $('.my-repeater').repeater({
      // whatever
});

// Set the data on the previous repeater on edit mode
if( true === edit_mode ) {
      my_repeater.setList([
            { 'input_name': 'foo-1' },
            { 'input_name': 'foo-2' }
      ]);
}

So, in this way, there's no need to edit the library core file.

how do you set a new variable here please help me