Sending data to php script via ajax & JQuery

Question

Being new to JQuery and trying to understand all the posts about different ways of posting data I still am at a loss as to why my function doesn't work. Any help would be welcome as I've spent days trying to get this to work.

I have a sortable ul list:

            <ul class="gallery" id ="gallery">
                <li id="item_59"><a href="/images/pages/apartamentos/155/image115_7.jpg" title=""><img src="/images/pages/apartamentos/155/image115_7.jpg"  alt="" /></a></li>
                <li id="item_61"><a href="/images/pages/apartamentos/155/image115_6.jpg" title=""><img src="/images/pages/apartamentos/155/image115_6.jpg"  alt="" /></a></li>
                <li id="item_62"><a href="/images/pages/apartamentos/155/image115_3.jpg" title=""><img src="/images/pages/apartamentos/155/image115_3.jpg"  alt="" /></a></li>
                <li id="item_63"><a href="/images/pages/apartamentos/155/image115_5.jpg" title=""><img src="/images/pages/apartamentos/155/image115_5.jpg"  alt="" /></a></li>
                <li id="item_64"><a href="/images/pages/apartamentos/155/image115_2.jpg" title=""><img src="/images/pages/apartamentos/155/image115_2.jpg"  alt="" /></a></li>
                <li id="item_65"><a href="/images/pages/apartamentos/155/image115_1.jpg" title=""><img src="/images/pages/apartamentos/155/image115_1.jpg"  alt="" /></a></li>
                <li id="item_66"><a href="/images/pages/apartamentos/155/image115_4.jpg" title=""><img src="/images/pages/apartamentos/155/image115_4.jpg"  alt="" /></a></li>
            </ul>

Then in the same doc I have this Jquery:

   <script type="text/javascript">

$(document).ready(function() {


        $(function(){
        $("#gallery").sortable({stop:function(event, ui) {

        $.ajax({
        type: "GET",
        url: "image_order.php",
        data: $("#gallery").sortable("serialize"),

                    success: function(data) {
                        if (data) {
                            $('#msg').html('Success');
                        } 
                    },
                    error: function () {
                        $('#msg').html('Failed');
                    }

                })
                }
            });

    }
}


</script>

Then I have a image_order.php:

 foreach ($_GET['item'] as $position => $item) {
$query_edit = "UPDATE `image_order` SET `position` = $position WHERE `id` = $item";
mysql_query($query_edit, $ith) or die(mysql_error());
$sql[] = "UPDATE `image_order` SET `position` = $position WHERE `id` = $item";
}

echo json_encode($sql);

Which when you manualy enter image_order.php?item[]=1&item[]=2&item[]=3&item[]=4 returns:

["UPDATE `image_order` SET `position` = 0 WHERE `id` = 1","UPDATE `image_order` SET `position` = 1 WHERE `id` = 2","UPDATE `image_order` SET `position` = 2 WHERE `id` = 3","UPDATE `image_order` SET `position` = 3 WHERE `id` = 4"] 

I have a similar json function which works on this page and I see the url being called in the console but not this one.

I've also tried $("ul.gallery").sortable({stop:function(event, ui) {... but that doesn't work either.

Help would be great...please...

Answer 1

I had to bind the sortstop event (RTM):

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

  $( "ul.gallery" ).bind( "sortstop", function(event, ui) {
        $.ajax({
        type: "GET",
        url: "image_order.php",
        data: $("ul.gallery").sortable("serialize"),

                    success: function(data) {
                        if (data) {
                            $('#msg').html('Success');
                        } 
                    },
                    error: function () {
                        $('#msg').html('Failed');
                    }

                })

            });