Using jQuery to create HTML is not working

Question

I'm trying to implement Paulo's answer from: http://stackoverflow.com/questions/758906/how-would-i-implement-stackoverflows-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

$('<div>')

Isn't a valid selector. You need an id or a class, then use one of these selectors:

$('#id')
$('.class')

or even

$('div')

if you want all divs

Answer 2

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);

Answer 3

The line in the middle (append) is what you were missing.

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

var element = $(this);

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


            // Here's the line you're missing.  Main Div is where you want to add the new element.                
            $("#mainDiv").append(err);


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

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

I should add in there, for things like 'after' etc to work, they actually need to be part of the page, not just element variables.

Answer 4

You could try this, it might help:

if (!data.SignedIn) {
    element.after($("<div class=\"member-check\">" + data.msg + "</div>").css("left", element.position.left).fadeIn("fast"));
};

Also, you don't need to use .append(?) before hand, .after(?) is smart enough to create the html and append it.

EDIT:

Or you could altogether try this:

$("tagName.member-only").bind("click", function (e) {
    //  e.preventDefault(); ?

    var element = $(this);

    $.post("/ajax/member", null, function (d) {
        if (d.SignedIn) {
            element.after($("<div class=\"member-check\">" + d.msg + "</div>").css({
                left: element.position.left
            }).fadeIn("fast"));
        };
    }, "json");

    $("div.member-check").live("click", function () {
        element.fadeOut("fast", function () {
            element.remove();
        });
    });
});

First, specify a tagName when you're doing your selectors, it will increase the performance of the lookup. Second, you're calling $.ajax to perform a post and ignoring $.post. Third, don't create your element before you've received a proper response. In your case you're making the div element before you know if the member is signed in.

I added null in the post call because I don't see where your post data is in your request.