JQuery UI serial sort method excludes one element

Question

I use jQuery UI sortable to list the elements on the page whose order I want to keep in the database every time I change it.

However, Im experiencing a strange error (it seems to me like one): both the serialize and toArray methods always exclude one element from the created serialized string (or array). This is always the item that is being dragged. This means that order is never tracked properly.

Here is an example of my javascript:

 $('.setContent').sortable({change: function(event, ui) { // Serialise the new order var newOrder = $('.setContent').sortable('serialize'); // Add the current set id and the action name newOrder += '&setId='+currentSet+'&action=usrStuff:changeCardsOrder'; // Send the data to the server $.post('ajax.php', newOrder); } }); 

And HTML:

 <div class="setContent> <div class="cardSmall" id="card_5"> <div class="hanzi">俄国</div> <div class="meaning">Russia</div> </div> <div class="cardSmall" id="card_4"> <div class="hanzi">韩国</div> <div class="meaning">Korea</div> </div> <div class="cardSmall" id="card_6"> <div class="hanzi">中国</div> <div class="meaning">China</div> </div> <div class="cardSmall" id="card_12"> <div class="hanzi">日本</div> <div class="meaning">Japan</div> </div> <div class="cardSmall" id="card_13"> <div class="hanzi">德国</div> <div class="meaning">Germany</div> </div> <div class="cardSmall" id="card_17"> <div class="hanzi">巴西</div> <div class="meaning">Brasil</div> </div> <div class="cardSmall" id="card_14"> <div class="hanzi">法国</div> <div class="meaning">France</div> </div> <div class="cardSmall" id="card_19"> <div class="hanzi">美国</div> <div class="meaning">America</div> </div> <div class="cardSmall" id="card_16"> <div class="hanzi">英国</div> <div class="meaning">England</div> </div> </div> 

So, in this case there are nine items in the list. But the sortable method will only return information about eight.

So how can I fix this?

Answer 1

You probably want the update event, not the change event.

change triggered when sorting whenever the order of elements in the DOM changes, even if the user does not release the element that they are moving. update triggered after the user has reordered the sorted items.