jQuery, need help with 'sortreceive' ajax call and POST vars.

Question

Hi there, I have a dilemma that just seems beyond my abilities at the moment!

I have a group of connected sortables using the class 'biglist'.

What I want to do is bind #biglist 's sortreceive callback (which is made whenever a list receives an element from another) to take the 'boxnum' value of the element (which signifies which list its coming from) and perform an UPDATE query changing the id's boxnum value from say 5(list it came from) to 7 (list its been dragged to) so that the state persists.

So the exchange would happen like so (roughly)

$( "#biglist" ).bind( "sortreceive", function(event, ui) {
  ajax call to boxchange.php
  create vars to represent elements 'boxnum' value and 'box moved to' value     

});

Then inside boxchange.php ->

 $id = $_POST['id']
 $box = $_POST['boxnum']
 ->update query SET boxid to new boxid WHERE id = posted ID of element

I hope this makes sense. It seems like a pretty slick way to make my program work! Any help is greatly appreciated.

EDIT:

Just cleaned up the function to see if there are any changes that need to be made to it (which I know there are, because it looks sloppy) This function would need to be copied/altered for each sortable separately but it'd totally make the program work at least!

function ReceiveTwo() 
{
$('#sortable2').bind('sortreceive', function(event, ui) 
                    {
                        boxnum = $(this).attr('boxnum');
                        id = $(this).attr('id');
                       $.ajax
                            ({
                        url: "boxchange.php",
                        type: "POST",
                        data: boxnum, id,
                        success : function(feedback)
                            {
                            $('#data').html(feedback)
                            }

                            })
                    });
                    $('#sortable2').sortable("refresh");
});

Answer 1

I think the way you want to send your Javascript data to your server-side PHP script is using a Javascript associative array, like so:

$.ajax({
  url: "boxchange.php",
  type: "POST",
  data: {'boxnum': boxnum, 'id': id},
  success: function(data,status) { ... }

Your "boxchange.php" script would then be able to access those variables via $_POST['boxnum'] and $_POST['id'].

I think that was your goal, but I'm not entirely sure...

Answer 2

$('#sortable2').bind('sortreceive', function(event, ui) {
   $.ajax({
     url: "boxchange.php",
     type: "POST",
     beforesend: function(){
        boxnum = $(this).attr('boxnum');
        id = $(this).attr('id');
     },
     data: {'boxnum': boxnum, 'id': id},
     success : function(feedback) {
        $('#data').html(feedback),
     }
   });
});

beforesend is the event that fires before the ajax call. I believe here you could set your properties to accomplish what you want.