jquery ui sortable + AJAX post

[Imaulle]

Hello,

 

I'm trying to do what this guy does here - http://www.hdeya.com/blog/2009/05/sorting-items-on-the-fly-ajax-using-jquery-ui-sortable-php-mysql/

 

 

but it's not working for me It seems $_POST['p_headerimages'] is always empty

 

 

Here is my code:

 

<script>
$(document).ready(function(){
  $("#SlideshowOne").sortable({
    update: function(){
      serial=$('#SlideshowOne').sortable('serialize');
      $.ajax({
        url: "sort_slideshow1.php",
        type:"post",
        data:serial,
        error:function(){
          alert("theres an error with AJAX")
        }
      })
    }
});
</script>

<ul id="SlideshowOne">
<?php
	$result = mysql_query("SELECT filename FROM p_headerimages ORDER BY ordernum") or die(mysql_error());
	while($row = mysql_fetch_array($result)) {
		echo '<li id="p_headerimages_'.$row['ordernum'].'" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> '. $row['filename'] .' </li>';
	}
?>
</ul>

 

<?php
require_once("../../../wp-config.php");
$p_headerimages = $_POST['p_headerimages'];
for ($i = 0; $i < count($p_headerimages); $i++) {
  mysql_query("UPDATE p_headerimages SET ordernum=" . $i . " WHERE filename=' ".$p_headerimages[$i]."'") or die(mysql_error());
}
?>

[trq]

Where have you defined serial?

[Imaulle]

I figured it out! my database did not have an ID so the sorting was not being done correctly 

[Imaulle]

okay new issue I'm trying to figure out now...

 

How would I have the .click() function also send some data to a php script that I can use to delete the li from the database that was just clicked

 

Here is my current javascript

 

$(function() {
    $('#SlideshowOne').sortable({
        update: function(event, ui) {
            var data = $(this).sortable("serialize");
            $.post("sort_slideshow1.php", data);
        }
    });
    $('#SlideshowOne a').click(function() {
        $(this).parent('li').fadeOut("slow", function() { $(this).remove(); });
    });
    $("#SlideshowOne").disableSelection();
});