php - JQuery UI Saving Sortable List


I know this question has been asked before but the solutions did not work for me. I am trying to save the new ordering of items to the database.

I have simplified it very considerably but this is the basic idea of it. I have a form with a sortable list embedded in it.

<form id="itemlist">
    <ul id="itemsort">
       <li id="Item_1">Item<input type="hidden" name="itemid[]" value="itemsRowID01"/></li>
       <li id="Item_2">Item<input type="hidden" name="itemid[]" value="itemsRowID02"/></li>
       <li id="Item_3">Item<input type="hidden" name="itemid[]" value="itemsRowID03"/></li>
       <li id="Item_4">Item<input type="hidden" name="itemid[]" value="itemsRowID04"/></li>

I have JQuery and JQuery UI Loaded and the The Following code enables the sortable list function and posts the item ids and New sort order to a php script. the "editor" variable is a public variable that is set on load it works fine. The sorting works fine but the neworder value that posts doesn't seem to change when I re-order the list.

//sorting feature  
    $("#itemsort").live('hover', function() {
            update : function () {          

                var neworder =  $('#itemsort').sortable('serialize');
                var inputs = serializePost('#itemlist');

                   'order': editor,
                   'inputs': inputs,
                   'neworder': neworder},function(){

                       alert("Order saved.", 1);


On actions.php...


            //set a variable for each post
            $batchid = $_POST['inputs']['itemid'];

            parse_str($_POST['neworder'], $neworder);

            //count the number of entries to be ordered
            $count = count($batchid);        

            //use the count to create an incremental loop for each item to be updated.
            while ($i <= $count) {

   $query ="UPDATE {$_POST['order']} SET order=$neworder[item][$i] WHERE id=$batchid[$i]";

I'm not sure why the order I get for each item will not change.

Any Ideas?





$("#list").live('hover', function() {

            update : function () {

                var neworder = new Array();

                $('#list li').each(function() {    

                    //get the id
                    var id  = $(this).attr("id");
                    //create an object
                    var obj = {};
                    //insert the id into the object
                    obj[] = id;
                    //push the object into the array


                $.post("pagewhereyouuselist.php",{'neworder': neworder},function(data){});


Then in your PHP file, or in this example "pagewhereyouuselist.php"

$neworderarray = $_POST['neworder'];
//loop through the list of ids and update your db
foreach($neworderarray as $order=>$id){    
    //you prob jave a connection already i just added this as an example
    $con = mysql_connect("host","username","password");

    if (!$con){
         die('Could not connect: ' . mysql_error());

    mysql_select_db("my_db", $con);

    mysql_query("UPDATE table SET order = {$order} WHERE id = {$id}");


that should do it i didn't test it as it is an example connection. the actual script I am actually using is more specific to my program this is a simplified version to show the concept




Try this:

Your HTML fields

<form id="itemlist" method="POST">
    <ul id="itemsort">
        <li id="Item_1">Item 1<input type="hidden" name="itemid[]" value="itemsRowID01"/></li>
        <li id="Item_2">Item 2<input type="hidden" name="itemid[]" value="itemsRowID02"/></li>
        <li id="Item_3">Item 3<input type="hidden" name="itemid[]" value="itemsRowID03"/></li>
        <li id="Item_4">Item 4<input type="hidden" name="itemid[]" value="itemsRowID04"/></li>

JS to send order:

$("#itemsort").live( 'hover', function() {
        update: function () {          
            var inputs = $('#itemlist').serialize();
            $.post("./jq-ui-test.php", inputs, alert("Order saved.") );

Saving order:

if( isset( $_POST['itemid'] ) && is_array( $_POST['itemid'] ) ) {
    foreach( $_POST['itemid'] as $order => $item ) {
        $order = intval( $order );
        $item_esc = mysql_real_escape_string( $item );
        $sql_query = "UPDATE {$_POST['order']} SET order={$order} WHERE id = '{$item_esc}'";

Also, if you want that start order start from 1 ( not from 0 ) change$order = intval( $order ); to$order = intval( $order ) + 1;

People are also looking for solutions to the problem: dom - PHP DOMXPath query using the innerHTML/nodeValue of an element to find and return the element


Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.