jQuery sortable serialize two columns in one database call?

Question

Hey all. A quick overview of what I'm trying to accomplish. I have two columns of data. Each column has an arbitrary amount of homogeneous elements. On the jQuery sortable update event I want to serialize the location of all the elements in their respectable column. Each element in the columns has an id of the form item_{id}. In the update event, I will serialize the elements in both columns. I was wanting to know if there was an efficient way to serialize the col1 and col2 column orders and combine them into a single database call. Out of the box, the sortable("serialize") method will return a formatted string like:

item[]=88&item[]=1&item[]=2&item[]=90

So, in the update event for column 1, I have:

$("#col1").sortable({
    handle: '.item h2',
    connectWith: '#col2',
    update: function(event, ui) { Update(event, ui); }
}).disableSelection();

And likewise for column 2:

$("#col2").sortable({
    handle: '.item h2',
    connectWith: '#col1',
    update: function(event, ui) { Update(event, ui); }
}).disableSelection();

And the Update event:

function Update(event, ui) {
    var col1Order = $("#col1").sortable("serialize");  // Returns item[]=88&item[]=1&item[]=2&item[]=90
    var col2Order = $("#col2").sortable("serialize");  // Returns item[]=23&item[]=10&item[]=65
}

Is there an efficient way to combine the column 1 ordering and column 2 ordering into one database call (It will store the updated position in the database)?

If I concatenate the two results together, it will result in a string of the form:

item[]=88&item[]=1&item[]=2&item[]=90&item[]=23&item[]=10&item[]=65

With this form, you are unable to differentiate which item came from which column. I have pondered different approaches. One approach would format the query string to look something like ?col1=88_1_2_90&col2=23_10_65 and then on the server side splitting the col1 value, 88_1_2_90, on the '_' which would give me an array of values (88 in position 0, 1 in position 1, and so on) and split the col2 value using the same method, but I thought there might be a more elegant way to accomplish this.

My main goal is to avoid making two separate database calls (one for column1 and and another for column2). I could serialize col1 and make a call to the database updating the positions of the elements within col1 and then serialize col2 and make another call to the database updating the positions of the elements within col2, but that's what I was trying to avoid.

I'm open to any and all suggestions. Thanks in advance.

Answer 1

What about using nested arrays? You should get something like this:

item[0][]=88&item[0][]=1&item[0][]=2&item[0][]=90&item[1][]=23&item[1][]=10&item[1][]=65

You can easily use array-related functions to flatten that into one array, if needed.