Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Connected Sortable Lists, Save Order to MySQL

Hoping that using something like this demo it is possible to drag items within and between two columns, and update their order either live or with a "save" button to MySQL. Point being that you can make changes and return to the page later to view or update your ordering.

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

Doing it for just one column is fine, but when I try to pass the order of both columns, the issue seems to be passing multiple serialized arrays with jQuery to a PHP/MySQL update script.

Any insight would be much appreciated.

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

sortable1
entry_1 => 0
entry_5 => 1

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

EDIT: This 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 the PHP query

parse_str($_REQUEST['sort1'], $sort1);
foreach($sort1['entry'] as $key=>$value)
{
do stuff
}
like image 334
noahkuhn Avatar asked Mar 24 '10 17:03

noahkuhn


1 Answers

what I would do is split them up

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

then when you post you can get the request and set them as needed, I hope that makes sense

so what I do is this

parse_str($_REQUEST['sort1'],$sort1); 

foreach($sort1 as $key=>$value){
    //do sutff;
}
like image 160
mcgrailm Avatar answered Oct 19 '22 00:10

mcgrailm