Using jQuery to create HTML is not working

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.

I'm only using the jQuery library. Why would I need to use .noConflict()? — JMan
– JMan, Commented Jul 30, 2010 at 4:58

ebynum · Accepted Answer · 2010-08-02 03:28:02Z

3

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

edited Aug 2, 2010 at 3:28

answered Jul 30, 2010 at 5:03

ebynum

3,5421 gold badge21 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JMan Over a year ago

Thanks, I standardized on using jQuery instead of $. I've narrowed the issue down to the .css line, as edited above.

JMan Over a year ago

Problem solved. I was missing () after "position". Thanks. .css('left', element.position().left)

codersarepeople · Accepted Answer · 2010-07-30 04:55:00Z

0

$('<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

answered Jul 30, 2010 at 4:55

codersarepeople

2,0013 gold badges21 silver badges25 bronze badges

3 Comments

Ben Rowe Over a year ago

$('<div />').appendTo($('.some-class')); is valid. Please check your facts.

ebynum Over a year ago

$('<div>') isn't a selector, it's a generator (creates <div></div>).

JMan Over a year ago

I'm not trying to select elements. I'm try to create DOM elements on the fly from a string of raw HTML. See: api.jquery.com/jQuery/#jQuery2

jamie-wilson · Accepted Answer · 2010-07-30 05:03:51Z

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.

Gup3rSuR4c · Accepted Answer · 2010-07-30 05:19:22Z

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.

Collectives™ on Stack Overflow

Using jQuery to create HTML is not working

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related