posting a variable with jquery and receiving it on other page

I want to post a variable id to a page. I'm trying the following code, but I can't get the id value, it says undefined.

function box(){
    var id=$(this).attr("id");

    $("#votebox").slideDown("slow");
    $("#flash").fadeIn("slow");

    $.ajax({
        type: "POST",
  //I want to post the "id" to the rating page.
        data: "id="+$(this).attr("id"),
        url: "rating.php",
        success: function(html){
            $("#flash").fadeOut("slow");
            $("#content").html(html);
        } 
    });
}

This function is called in the following code. In the following code too, the id is posted to the page votes.php, and it works fine, but in the above code when I'm trying to post the id to the rating.php page, it does not send.

$(function(){
$("a.vote_up").click(function(){

the_id = $(this).attr('id');
$("span#votes_co开发者_开发百科unt"+the_id).fadeOut("fast");
$.ajax({
        type: "POST",
        data: "action=vote_up&id="+$(this).attr("id"),
        url: "votes.php",
        success: function(msg)
        {
            $("span#votes_up"+the_id).fadeOut();
            $("span#votes_up"+the_id).html(msg);
            $("span#votes_up"+the_id).fadeIn();
            var that = this;
            box.call(that); 
        }
    });
});       
 });

rating.php

<?
$id = $_POST['id'];
echo $id;
?>

The html part is:

<a href='javascript:;' class='vote_up' id='<?php echo $row['id']; ?>'>Vote Up!</a>

I'll appriciate any help.

If you have not installed firebug then I think you should do that first.

Next I would output id to console:

var id=$(this).attr("id");
console.log(id);

There could be a good chance that id is not what you thought it was. If correct then you could continue reading on.

From the jquery documentation

Example: Alert out the results from requesting test.php with an additional payload of data (HTML or XML, depending on what was returned).

$.post("test.php", { name: "John", time: "2pm" },
   function(data){
     alert("Data Loaded: " + data);
   });

This might work:

$.post("rating.php", { id: id }, function(data) {
  console.log(data);
});

The problem here is with what this is in the context of an AJAX event handler. Your AJAX:

$.ajax({
    type: "POST",
    data: "action=vote_up&id="+$(this).attr("id"),
    url: "votes.php",
    success: function(msg)
    {
        $("span#votes_up"+the_id).fadeOut();
        $("span#votes_up"+the_id).html(msg);
        $("span#votes_up"+the_id).fadeIn();
        var that = this;
        box.call(that); 
    }
});

In the success handler, this is not the the element in the event handler. Instead it is the XMLHTTPRequest object from the AJAX request. You need to cache that outside the event handler:

var that = this;
$.ajax({
    type: "POST",
    data: "action=vote_up&id="+$(this).attr("id"),
    url: "votes.php",
    success: function(msg)
    {
        $("span#votes_up"+the_id).fadeOut();
        $("span#votes_up"+the_id).html(msg);
        $("span#votes_up"+the_id).fadeIn();
        box.call(that); 
    }
});