Question

In the top part of my document I have this Jquery code:

// RATING 
$('.rateit').click(function(){
var position = $(this).position();
});

In the footer I have a ajax call:

  jQuery.ajax({
             url: frm.attr('action'), //your server side script
             data: frm.serialize(), //our data
             type: 'POST',
             success: function (data) {
            alert(position.left);
            },

The problem is that the alert box is not showing with the position. I have tested with alert('something'); and it works fine.

My real ajax call:

 jQuery.ajax({
     url: frm.attr('action'), //your server side script
     data: frm.serialize(), //our data
     type: 'POST',
     success: function (data) {
    $('.warning').fadeIn(500).css({display: 'block',
        position: 'absolute',
        left: position.left + 50,
        top: position.top - 25
    }).append('asdasdsadsad'),
    $(ri).next('.ratingcount').html('asdasdasd')
    },
     error: function (jxhr, msg, err) {
         alert(msg); //something went wrong.
     }
 });

Answer 1

You declare position inside the anonymous function used as a click event handler. That means it won’t be in scope when you try to alert it (you will get a ReferenceError).

You will need to declare position outside of the event handler function:

var position;
$('.rateit').click(function(){
    position = $(this).position();
});

However, you will still get an error if the click event handler hasn’t been executed when your alert runs, because position will be undefined and therefore won’t have a left property.