jQuery Sortable Grid into MySQL Database PHP

I'm trying to sort images using: http://jqueryui.com/demos/sortable/display-grid.html And then somehow submit the newly sorted array/results into a MySQL Database using PHP?

I'm having difficulty figuring this out (newby alert),开发者_开发技巧 so if anyone can shed some light on this, I'll be dishing out hi-5s like there's no tomorrow.

Cheers

In particular you need to look at attaching an event to the sortable

http://jqueryui.com/demos/sortable/#event-update

and serialize for getting the relevant content http://jqueryui.com/demos/sortable/#method-serialize

EDIT

This is a primitive version of what you need to do.

<script>
$(function() {

    var arrayOfIds = [];

    $( "#sortable" ).sortable({

          update: function(event, ui) { 
            $.each($(this).sortable('toArray'), function(key, value) {
                arrayOfIds.push(value.replace('el-',''))
            });

            var jqxhr = $.ajax({ 
                url: "order.php?order="+encodeURIComponent(arrayOfIds),

            })
            .success(function(response) { console.log("success"  + response ); })
            .error(function() {  console.log("error"); })
            .complete(function() {  console.log("complete "); });

          }

    });
    $( "#sortable" ).disableSelection();
});
</script>

Each li element than needs an id that your DB can understand

<li class="ui-state-default" id="el-1">1</li>

the "1" in id="el-1" should relate to an id in your DB table. When you reorder, the update event fires, goes through the new order, grabs all the ids and passes that to an ajax request which a php file then can pick up. the order.php script then go split the numbers by the "," and update your table one by one.

e.g.

$itemOrders = explode(',',$_POST['order']);

$sizeOfList = sizeof($itemOrders);for($i=0; $i<$sizeOfList; $i++)
{
    $itemId = intval($itemOrders[$i]); 

    $query = "UPDATE your_table_name SET order_no = '".$i."' WHERE id = '".$itemId."' ";
    if ($result = $msHandle->query($query))
    {
        $message = 'success';
    }
        else
    {
        $message =   'fail ';

    }
}

There will be a callback function on the sorting event which you can use to send an AJAX request to a PHP script which updates a database. Think of it as after you've made a sorting action (i.e. moving one item around), you send the values (i.e. the ordered list) to a PHP script that takes those values and updates the database. I'll assume you have experience in MySQL as you seem to know the fundamentals of the problem.