Question

I am using jQueryUI 1.8.14. I would like to implement a sortable list and to save related item position changes in my application database each time an user changes an item position.

To do that I am planning to retrieve and serialize the id value and the new position value of the item that has just changed its position (I need to make that so to generate and prepare data in order to perform an AJAX HTTP request). Anyway, using the serialize method as descibed in the official documentation it will serialize all item id values in a submittable string (eg: key=1&key=2&...), but I would like to serialize only the current item id value and retrieve its new position value.

How can I make\code that?

---

At this time I am trying to implement that functionality this way:

JavaScript code:

$jQ(function() {
  $jQ("#sortable_list").sortable({
    placeholder: "ui-state-highlight",
    update: function(event, ui) {

      // Here I would like to "serialize" ONLY the current updated item and
      // then perform the AJAX HTTP request

      // alert($jQ("#sortable_list").sortable("serialize"))
      ...
    }
  });
  $jQ( "#sortable_list" ).disableSelection();
});

HTML code

<ul id="sortable_list">
  <li class="ui-state-default" id="key_1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default" id="key_2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  ...
</ul>

For istance, if I change the item position related to the id="key_2" I would like to serialize just that data to key=2 (note: generally the serialize method generates data like key=1&key=2&...). Furthermore, I would like to include the current\new position of that item (eg: new_position=1). Finally, I would like to perform the AJAX HTTP request including those parameters: <URL_string>?key=2&new_position=1.

Answer 1

Tested it http://jsfiddle.net/kRsCE/

$jQ(function() {
  $jQ("#sortable_list").sortable({
    placeholder: "ui-state-highlight",
    update: function(event, ui) {
        var itemid = $(ui.item).attr('id');
        var position;
        $jQ("sortable_list > li").each(function(index) {
            if($(this).attr('id') == itemid) {
               position = index;
               return;
            }
        });
        $.post('yourajaxscript', '&key='+itemid+'&new_position='+position, function(data) {
            //handle response
        });
    }
  });
  $jQ( "#sortable_list" ).disableSelection();
});