未被捕获的引用错误$未定义ajax-jquery

I'm trying to pass some variables using jquery and ajax but for some reason its not working. Here is the code.

<div id=' . $result['game_id'] . ' name="' . $user_id . '"  class="rate_widget" >
            <div class="star_1 ratings_stars"></div>
            <div class="star_2 ratings_stars"></div>
            <div class="star_3 ratings_stars"></div>
            <div class="star_4 ratings_stars"></div>
            <div class="star_5 ratings_stars"></div>
            <div class="total_votes">vote data</div>
        </div>

when i check chrome's developer tools i can see that the id and name attributes are set correctly .

Here is the javascript(using jquery) i put an alert box to see if the value was set but i get undefined. Just started learning ajax and jquery this week any help would be appreciated.

$('.rate_widget').each(function() {
        var widget = this;
        var out_data = {
            game_id : $(widget).attr('id'),
            user_id : $(widget).attr('name')
        };
        alert(game_id);
        $.post(
            'ratings.php',
            out_data,
            function(INFO) {
                $(widget).data( 'fsr', INFO );
                set_votes(widget);
            },
            'json'
        );

In case its not clear im trying to send game_id and user_id with the corresponding values to a php script but im getting the error. Also i know there is another question with the same name but i checked it and it didn't help.

You can't reference game_id like that. game_id is an index in the out_data object.

To alert the correct value you'd have to use :

alert(out_data['game_id']);

I'd also recommend wrapping your object indexes with quotes - just to make it a little more readable -

var out_data = {
  'game_id' : $(widget).attr('id'),
  'user_id' : $(widget).attr('name')
};

Did you put your javascript inside this ?

$( document ).ready( function(){
     // .. your code
})

Your javascript must have run before your php finished generating html.