Working with jQuery UI sortable to move around a list of items, and trying to update their positions in form field values. I can't figure out how to update a hidden input value for each item with its updated position number. All of the 'currentposition' values should change on each move. And the position numbers happen to be displayed in reverse order on the page.

<div id='sort-list'>
  <div id='listItem_4'>
    ITEM 4
    <input class='originalposition' type='hidden' name='item[4][origposition]' value='4'>
    <input class='currentposition' type='hidden' name='item[4][currposition]' value='4'>
  </div>
  <div id='listItem_3'>
    ITEM 3
    <input class='originalposition' type='hidden' name='item[3][origposition]' value='3'>
    <input class='currentposition' type='hidden' name='item[3][currposition]' value='3'>
  </div>
  <div id='listItem_2'>
    ITEM 2
    <input class='originalposition' type='hidden' name='item[2][origposition]' value='2'>
    <input class='currentposition' type='hidden' name='item[2][currposition]' value='2'>
  </div>
  <div id='listItem_1'>
    ITEM 1
    <input class='originalposition' type='hidden' name='item[1][origposition]' value='1'>
    <input class='currentposition' type='hidden' name='item[1][currposition]' value='1'>
  </div>
</div>

The item[#][currposition] value should be changed to the new updated position number for all items. The position value for each item should be updated, and have the correct value when the form is submitted. And the positions will be compared to the orginal values on submission.

The closest I have gotten so far is something like:

$(function() {
    $( '#sort-list' ).sortable({
        update : function () { 
            var result = $('#sort-list').sortable('toArray');
            $('input.positioncurrent').each(function() {           

            });
        }
    });
});

Thanks for the help.

Working with jQuery UI sortable to move around a list of items, and trying to update their positions in form field values. I can't figure out how to update a hidden input value for each item with its updated position number. All of the 'currentposition' values should change on each move. And the position numbers happen to be displayed in reverse order on the page.

<div id='sort-list'>
  <div id='listItem_4'>
    ITEM 4
    <input class='originalposition' type='hidden' name='item[4][origposition]' value='4'>
    <input class='currentposition' type='hidden' name='item[4][currposition]' value='4'>
  </div>
  <div id='listItem_3'>
    ITEM 3
    <input class='originalposition' type='hidden' name='item[3][origposition]' value='3'>
    <input class='currentposition' type='hidden' name='item[3][currposition]' value='3'>
  </div>
  <div id='listItem_2'>
    ITEM 2
    <input class='originalposition' type='hidden' name='item[2][origposition]' value='2'>
    <input class='currentposition' type='hidden' name='item[2][currposition]' value='2'>
  </div>
  <div id='listItem_1'>
    ITEM 1
    <input class='originalposition' type='hidden' name='item[1][origposition]' value='1'>
    <input class='currentposition' type='hidden' name='item[1][currposition]' value='1'>
  </div>
</div>

The item[#][currposition] value should be changed to the new updated position number for all items. The position value for each item should be updated, and have the correct value when the form is submitted. And the positions will be compared to the orginal values on submission.

The closest I have gotten so far is something like:

$(function() {
    $( '#sort-list' ).sortable({
        update : function () { 
            var result = $('#sort-list').sortable('toArray');
            $('input.positioncurrent').each(function() {           

            });
        }
    });
});

Thanks for the help.

• javascript
• jquery
• html
• forms
• jquery-ui

• note that asker wants items to be displayed in reverse order. – AGuyCalledGerald Commented Nov 19, 2014 at 14:09

3 Answers 3

You should use the stop event to update the position when the sort ends.

What I did is, when the sort ends, you retrieve the list of inputs you want to update and their numbers, and for each one you update the new position. The each() method provides the current index of the element in the list as an argument.

$(function() {
    $( '#sort-list' ).sortable({
        stop: function () {
            var nbElems = inputs.length;
            $('input.currentposition').each(function(idx) {
                $(this).val(nbElems - idx);
            });
        }
    });
});

Working jsfiddle

You can follow command below:

let oldSort = $('.field_list').sortable('toArray');

$(function() {
    $( '#sort-list' ).sortable({
        stop: function () {
            $('input.currentposition').each(function(idx) {
                $(this).val($(this).index('input.currentposition') + 1);
            });
        }
    });
});