jQuery Connected Sortable Lists, Save Order to MySQL

12,932

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;
}
Share:
12,932
noahkuhn
Author by

noahkuhn

Updated on June 09, 2022

Comments

  • noahkuhn
    noahkuhn almost 2 years

    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
    }