jquery ajax $(this) object returning null from .html()

Question

I've got a JavaScript function using a jQuery ajax $.post(... to query a database and then returns the JSON code back to be handled by a callback function.

<a href="#" iid="234" class="tooltp wish-clicked" data-original-title="Add to Watch List"><i class="icon-heart" style="color:red"></i> Add to Watch List</a>

Calling Function:

$(".wish-clicked").click(function(e){
    e.preventDefault();
    var callback = function (data, obj){
        var obj = jQuery.parseJSON(data);
        alert($(obj).html()); //B
        if (!obj.error) {
            $(obj).html("Watching");                
        } else {
            alert("Failed to set item for watching");                   
        }
    };
    alert($(this).html()); //A
    setWishList($(this).attr("iid"), callback, this);
});

When the user clicks on the link with class .wish-clicked it fires this function.

setWishList() lives in another .js file and is:

function setWishList(iid, callback, obj) {
    $.post("set_wish_list.php", {iid: iid}, function(data) {
        phpErrPlusParam(data, callback, obj);
    }).fail(function() { errLive(data) });
}

This passes the data through to function phpErrPlusParam defined as:

function phpErrPlusParam(data, callback, param) {
    if (err(data)) {
        alert('System Error: ' + data); 
    } else {
                    //C
        return callback(data, param);   
    }
}

The callback then runs and handles the result. Problem is that I'm also passing in the 'this' object from the click event. Section marked //A will return the html of the element link being clicked. The section marked //B (which holds the same object (it still appears ok I've checked in chrome debugger) displays null.

I'm confused to what's happening here, somewhere along the line the object loses the ability to return html()??

EDIT: The point at which it stops giving the correct output is at //C (i.e. when it's given to the callback.

Can you check if obj in setWishList and param in phpErrPlusParam are null? — Cerbrus
– Cerbrus, Commented Feb 5, 2014 at 8:46

Goran.it · Accepted Answer · 2014-02-05 08:47:03Z

1

You should use local variable to hold this and later refer to it since the callback is inside the same function like this:

$(".wish-clicked").click(function(e){
    e.preventDefault();
    var $this = $(this);
    var callback = function (data, obj){
        var obj = jQuery.parseJSON(data);
        alert($this.html()); //B
        if (!obj.error) {
            $this.html("Watching");                
        } else {
            alert("Failed to set item for watching");                   
        }
    };
    alert($this.html()); //A
    setWishList($(this).attr("iid"), callback, this);
});

answered Feb 5, 2014 at 8:47

Goran.it

6,3772 gold badges25 silver badges26 bronze badges

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

1 Comment

sapatos Over a year ago

you trooper, of course. silly me. still confused as to why the object passed doesn't work though

Philipp · Accepted Answer · 2014-02-05 10:07:32Z

1

Solution will be to change click-handler:

$(".wish-clicked").click(function(e){
    var self = $(this);
    // ...
    alert(self.html());
    setWishList(self.attr("iid"), callback, self);
}

Btw: You can always do a console.log(this) at each state of the process to investigate which object you are dealing with. Open the console in Chrome/Firefox/IE with F12 (Windows) or Cmd+Alt+I (Mac)

edited Feb 5, 2014 at 10:07

answered Feb 5, 2014 at 8:50

Philipp

11.5k9 gold badges69 silver badges75 bronze badges

Collectives™ on Stack Overflow

jquery ajax $(this) object returning null from .html()

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related