JQuery Sortable Update Event can be called only once?

Question

I am trying to change a category using jQuery and php. I have no problem with this. My problem is that when the update event is called, 2 results are returned. 1 result for Dragged Parent, one result for Dropped Parent. I want to call only the dropped parent id. Here is my script:

$("#gallery ul").sortable({ connectWith: '.dropBox', opacity: 0.35, scroll: true, scrollSensitivity: 100, //handle: '.move', helper: 'clone', containment:'#gallery', accept:'#gallery > .photo', revert: true, update: function(event, ui){ params = 'c=' + $(this).attr('id') + '&id=' + ui.item.attr('id'); $.ajax({ type: 'POST', url: 'processData.php', data: params, error:function(){ alert("Error!"); }, success:function(data){ $("#serverResponse").html(data); } }); } }).disableSelection(); 

Can you help me guys?

Answer 1

Use update , stop and receive events, for example

 $(function() { position_updated = false; //flag bit $(".sortable").sortable({ connectWith: ".sortable", update: function(event, ui) { position_updated = !ui.sender; //if no sender, set sortWithin flag to true }, stop: function(event, ui) { if (position_updated) { //code position_updated = false; } }, receive: function(event, ui) { // code } }).disableSelection(); }); 

Answer 2

ui.sender exists only in the second callback.

 $(".sortable").sortable({ connectWith: ".sortable", update: function (evt, ui) { // just ignore the second callback if(ui.sender == null){ // call ajax here } }, receive: function (evt, ui) { // called after the first 'update' // and before the second 'update' // ui.sender is always exists here } }).disableSelection(); 

Answer 3

You should try to play with sortable various events.

• start
• kind
• change
• beforeStop
• stop
• update
• receive
• remove
• over
• of
• activate
• Deactivate

I am sure that one of them will be your answer.

Source: http://jqueryui.com/demos/sortable/#event-change

Answer 4

Just do the following:

  update: function(event, ui) { if(ui.sender) { // Your actual code } },