jQuery, PHP, MySQL - Sortable List
I am trying to make a sortable list with Jquery that updates my database with the positions of each item in a list. I know PHP, but I don't know JQuery at all and I was hoping someone could help me get on the right track.
I searched around on the web and found this example in different forums, but it doesn't seem to work for me.
Here's my xhtml list:
-
<ul id="sortme">
<li id="foo_1" class="sortitem">Lorem</li>
<li id="foo_2" class="sortitem">Foo</li>
<li id="foo_3" class="sortitem">Bar</li>
<li id="foo_4" class="sortitem">Ipsum</li>
</ul>
<div id="data" style="background-color: #CCCCCC; padding: 15px; border:solid 1px #999;">
</div>
Here is my javascript:
-
<script type="text/javascript">
$(document).ready(function() {
$("#sortme").sortable({
accept : 'sortitem',
onchange : function (sorted) {
serial = $.SortSerialize('sortme');
$.ajax({
url: "sortdata.php",
type: "POST",
data: serial.hash,
complete: function(feedback){ $('#data').html(feedback); },
success: function(feedback){ $('#data').html(feedback); },
error: function(feedback){ $('#data').html(feedback); }
});
}
});
}
);
</script>
Here's my PHP:
-
<?php require_once ("connection.php") ?>
<?php require_once ("function.php") ?>
<?php
$sortme = $_POST['sortme'];
for ($i = 0; $i < count($sortme); $i++) {
mysql_query("UPDATE images SET position=$i WHERE id=$sortme[$i]");
}
?>
So, from what I understand, Serialize should pass the lists Id's as an array via Post data to my PHP script: sortdata.php. Then I should use PHP to grab the Post data from the Array? Let me know if this is right or if I am way off.
How do I tell what the Javascript is actually sending sortdata.php and what format it is really in? To me it looks like it should return something to the #data DIV, but right now it isn't.
Right now the script isn't working, and I don't know how to debug it to see if it's the Javascript that's wrong or if it's my update statement with my PHP. Any advice/help would be appriciated...thanks.