1

I'm using the following jquery plugin https://github.com/DubFriend/jquery.repeater to create repeatable input fields into a form. I've also added support for re-ordering of the elements through the jquery sortable plugin. Everything is working fine except the indexing of the repeatable elements is messed up.

By reading the documentation of the repeater plugin, I see there's a way to reset the index https://github.com/DubFriend/jquery.repeater/issues/9 but I'm unable to understand how to trigger the functionality after the drag and drop. Can anybody suggest me how to do it?

This is my sortable code

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 code.

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
});

Does anybody have any idea how to trigger the reset?

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
Alex
  • 11
  • 1
  • 3

2 Answers2

0

Although this is an old thread, but for anyone who stumbles across this,

Ready function is passed setIndexes method as its first argument, so you can do something like this inside the ready method of repeater:

ready: function(setIndexes) {
    $('body').on('click', '#delete_page', function(event) {
        // your logic
        setIndexes(); // this will reindex the list
    });
}
tAken
  • 1
  • 1
0

Here's a workaround that you can use at "ready" function of repeater:

ready: function (setIndexes) {
    $(".repeater-table").mouseup(function(){
        setIndexes();
    });
},