Question

I’m trying to implement Paulo’s answer from:
How would I implement stackoverflow's hovering dialogs?.

However, my variable “err” keeps evaluating to “NULL”.
The problem is with the line .css('left', element.position.left);

When I include it, err = NULL.
When I take it out, err = an object with the necessary properties.
But I need this CSS statement.

(by the way I changed all my $ references to jQuery in response to the advice below.)

Here’s my code:

jQuery('.member-only').click(function() {

    var element = jQuery(this);

    jQuery.ajax({
        type: 'POST',
        url: '/ajax/member',
        dataType: 'json',
        success: function(data)
        {
            var err = jQuery('<div></div>')
                        .addClass('member-check')
                        .append(data.msg)
                        .css('left', element.position.left);

            if (!(data.SignedIn))   // not signed in
            {
                element.after(err);
                err.fadeIn('fast');
            }
            // otherwise just continue
        }
    });

    jQuery('.member-check').live('click', function(){
        element.fadeOut('fast', function() {element.remove(); });
    });
});

Thanks.

Answer 1

It’s hard to say without more context, but it looks like you either have something else using the $ variable – possibly Prototype – or you have called jQuery.noConflict(). You’re attaching the click event using jQuery('.member-only').click() and then using $.ajax() inside that click event handler. Even if this isn’t the source of your problem, you should choose one of the object names (either jQuery or $) and stick with it instead of switching back and forth.

You’re setting element to jQuery(this) which is a jQuery object, not a DOM node. It is a standard pattern in jQuery to prefix variables that are jQuery objects with a $, so your code will be more readable like this:

var $element = jQuery(this);
  ...
.css('left', $element.position().left);