Extending the jQuery Sortable With Ajax & MYSQL

the_includes.html

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<link rel='stylesheet' href='styles.css' type='text/css' media='all' />

the_javascript.js

<script type="text/javascript"> 
    // When the document is ready set up our sortable with it's inherant function(s) 
    $(document).ready(function() { 
        $("#test-list").sortable({ 
            handle : '.handle', 
            update : function () { 
            var order = $('#test-list').sortable('serialize'); 
                $("#info").load("process-sortable.php?"+order); 
            } 
        }); 
    }); 
</script>

the_markup.html

<pre> 
    <div id="info">Waiting for update</div> 
</pre> 

<ul id="test-list"> 
    <li id="listItem_1"> 
        <img src="arrow.png" alt="move" width="16" height="16" class="handle" /> 
        <strong>Item 1 </strong>with a link to <a href="http://www.google.co.uk/" rel="nofollow">Google</a> 
    </li> 
    <li id="listItem_2"> 
        <img src="arrow.png" alt="move" width="16" height="16" class="handle" /> 
        <strong>Item 2</strong> 
    </li> 
    <li id="listItem_3"> 
        <img src="arrow.png" alt="move" width="16" height="16" class="handle" /> 
        <strong>Item 3</strong> 
    </li> 
    <li id="listItem_4"> 
        <img src="arrow.png" alt="move" width="16" height="16" class="handle" /> 
        <strong>Item 4</strong> 
    </li> 
</ul> 

<form action="process-sortable.php" method="post" name="sortables"> 
    <input type="hidden" name="test-log" id="test-log" /> 
</form>

the_php.php

<?php 

/**
 * This is where you would inject your sql into the database 
 * but we're just going to format it and send it back 
 */ 

foreach ($_GET['listItem'] as $position => $item)
{
    $sql[] = "UPDATE `table` SET `position` = $position WHERE `id` = $item"; 
}

print_r ($sql); 

?>