JQuery Connected Sortable Lists, Save Order to MySQL

Hoping that using something like this demo, you can drag and drop items inside and between two columns and update their order either live or by using the Save button in MySQL. The point is that you can make changes and return to the page later to view or update your order.

http://pilotmade.com/examples/draggable/

Doing this for only one column is fine, but when I try to transfer the order of both columns, the problem is passing multiple serialized arrays using jQuery to an update to the PHP / MySQL script.

Any insight would be greatly appreciated.

If you look below, I want to say ...

sortable1
entry_1 => 0
entry_5 => 1

sortable2
entry_3 => 0
entry_2 => 1
entry_4 => 2

EDIT: It ended up doing the trick.

HTML

<ol id="sortable1"><li id="entry_####">blah</li></ol> 

JQuery

 <script type="text/javascript"> $(function() { $("#sortable1, #sortable2").sortable( { connectWith: '.connectedSortable', update : function () { $.ajax( { type: "POST", url: "phpscript", data: { sort1:$("#sortable1").sortable('serialize'), sort2:$("#sortable2").sortable('serialize') }, success: function(html) { $('.success').fadeIn(500); $('.success').fadeOut(500); } }); } }).disableSelection(); }); 

This is a PHP request.

 parse_str($_REQUEST['sort1'], $sort1); foreach($sort1['entry'] as $key=>$value) { do stuff } 
+6
jquery php mysql jquery-ui-sortable
source share
1 answer

what i would do is divide them by

  data : { sort1:$('#sortable1').sortable('serialize'), sort2:$('#sortable2').sortable('serialize') } 

then when you send a message, you can receive a request and install it as needed, I hope it makes sense

so what am i doing this

 parse_str($_REQUEST['sort1'],$sort1); foreach($sort1 as $key=>$value){ //do sutff; } 
+7
source share

All Articles