Workaround for Bootstrap 3 Touchspin plugin

[weidmaster]

While working in a project I stumbled upon a bug with Touchspin plugin when user Repeater. I think the bug is in the Touchspin plugin though.

The bug is that Touchspin will already change and style the repeated instances and I don't know why it happens. You can see in the screenshots that it is in fact duplicating the DOM elements and not working at all.

As the Touchspin plugin does not have a way to destroy and recreate the input, I present this workaround.

The issue happens when you have a Repeater with starter fields. It will work fine if the first item is hidden.

To workaround this particular issue, use the ready() function. Even though the documentation says it is for reindexing purposes, I discovered you can actually run any code as the Repeater was just initialized.

There is a side effect though, but minimal. The input with Touchspin applied will flash in a non-cached page, but the ones made by the Add button will work just fine.

Here is the code:

var formulario = $('.repeater').repeater({
        show: function () {
             $(".touchspin").TouchSpin({
        buttondown_class: "btn blue",
        buttonup_class: "btn blue",
        initval: 1,
        min: 1,
        step: 1
    });
            $(this).slideDown();
        },
        isFirstItemUndeletable: true,
        ready: function() {
            $(".touchspin").TouchSpin({
                buttondown_class: "btn blue",
                buttonup_class: "btn blue",
                initval: 1,
                min: 1,
                step: 1
            });     
        }
    });

Initial state

Before workaround

After workaround

[badirca]

I have an issue when adding the form (via repeater) the buttons touchspin-up and touchspin-down are not working. Does it work for you ?
The code you've mentioned has no effect for me.
Thank you !

[weidmaster]

I have an issue when adding the form (via repeater) the buttons touchspin-up and touchspin-down are not working. Does it work for you ?
The code you've mentioned has no effect for me.
Thank you !

Hello! It has been a long time I didn't work on the project mentioned in the issue so I didn't do any further tests. Anyway, the code just makes sure to initialize Touchspin outside the main loop for repeater, because I needed to have the first input visible already.

Is that how you setuped your solution as well? Maybe it is another issue altogether. But you can show screenshots and the code you are using, and we can try to debug it.

[badirca]

I've managed to get it to work. It took a day to see that I need to have initEmpty true in order to make it work : )
Anyways, thank you very much for your willingness !
Hope you are good and enjoying yourself !