Member Avatar for bobgodwin

I need to sort items from multiple columns. I use this to get the id from the columns and format the data:

$.fn.serial = function() {
    var array = [];
    var $elem = $(this); 
    $elem.each(function(i) {
        var id = this.id;
        $(move_selector, this).each(function(e) {
            array.push( 'id[]=' + this.id  );
        });
    });
    var data = array.join('&');  
    //console.log(data);
    return data;    
};

$(function() {
    $("div.connectedSortable").sortable({
        connectWith: '.connectedSortable',
        update: function(event, move_selector) {
            $('#data').empty().html( $('.connectedSortable').serial() );
            var datatest = $('#data').text();
            //$('#test').text(datatest)
            console.log(datatest);
        }
    }); 
});

This gets the data to the console.log but I can't seem to get it into a variable that I can use for the ajax request.
This kind of works:

    $('#sub_butt').click(function(event){
        var datatest = $('#data').text();
        $.ajax({
            beforeSend: bs,
            complete: comp,
            data: datatest,
            type: 'POST',
            url: subphp,
            inline : true
        });
        event.preventDefault();
    });

It can do this without the "connectWith" (With one column), but can't seem to do it with it.

  • 2 Contributors
  • 2 Replies
  • 494 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by bobgodwin

Dani AI

Generated

Quick note for this thread: when using connected sortables you can get a correct serialized string in the console but still have problems sending or processing it because the sortable events behave a little differently with connectWith. The update handler can run for both the source and the destination when an item moves between lists, so handlers that always act on every update call can cause duplicate work or race conditions. 's question about what the console showed was exactly the right place to debug this; and later confirmed the ultimate failure was a corrupt database — server-side errors can make client-side debugging misleading. See the discussion about update firing for connected lists. (stackoverflow.com)

Avoid using a hidden DOM element as a data bus. Build a plain JS object (or a query string) and send that directly. A simple, reliable client pattern is: collect each column’s order with sortable("toArray") (or sortable("serialize") when IDs follow the expected format), guard the update handler so it only runs once per user action, then POST JSON to the server. Example:

function collectState(){
  var out = {};
  $('.connectedSortable').each(function(){
    var col = this.id || 'col'+$(this).index();
    out[col] = $(this).sortable('toArray');
  });
  return out;
}

$('.connectedSortable').sortable({
  connectWith: '.connectedSortable',
  update: function(e, ui){
    if (this !== ui.item.parent()[0]) return; // ignore duplicate update
    var payload = collectState();
    console.log(payload); // sanity check before send
    $.ajax({
      url: 'save_order.php',
      method: 'POST',
      contentType: 'application/json; charset=utf-8',
      data: JSON.stringify(payload)
    }).fail(function(xhr){ console.error('save failed', xhr); });
  }
});

The toArray / serialize helpers make the client payload predictable; read the API notes for the ID format and options. (api.jqueryui.com)

Server-side: accept JSON, validate it, and perform updates inside a transaction; roll back on error and log failures. If you see inconsistent or partial updates, enable query error logging and run DB integrity checks — a corrupt table can show the exact symptoms described. For cross-list moves you can also use receive/remove or the single stop event as alternate places to assemble/send updates. (api.jqueryui.com)

Practical checklist: log the payload (console + network tab), watch the server response (status + body), use transactions and prepared statements, and add a small debounce/guard so one user action triggers exactly one server write.

Recommended Answers

All 2 Replies

Member Avatar for Taywin

What was displayed on the console log? And what did you get in Ajax? Did you sort it before you pass to Ajax?

Member Avatar for bobgodwin

Sorry for the delayed reply. Turned out to be a corrupt database. All the logs come back ok. But the database would only half or randomly update.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.