CODEWITHSUNDEEP
jqueryajaxthisundefined
JohnnyQ
JohnnyQ

Reputation: 5119

How come $(this) is undefined after ajax call

I am doing an ajax request when an anchor tag is clicked with an ID set to href. Btw, this anchor tag is dynamically created.

<a href="983" class="commentDeleteLink">delete</a>

When the anchor tag is clicked the following code is executed:

    $('.commentDeleteLink').live('click', function(event) {
        event.preventDefault();
        var result = confirm('Proceed?');

        if ( result ) {
            $.ajax({
                url: window.config.AJAX_REQUEST,
                type: "POST",
                data: { action       : 'DELCOMMENT',
                        comment      : $('#commentText').val(),
                        comment_id   : $(this).attr('href') },
                success: function(result) {
                    alert($(this).attr('href'));
                    //$(this).fadeOut(slow);
                }
            });
        }
    });

When I tried to display $(this).attr('href') it says it's "undefined". What I really want to do is fadeOut the anchor tag but when I investigated the value of $(this) it is "undefined".

What could be wrong with the snippet above?

Upvotes: 2

Views: 3688

Answers (5)

Rick
Rick

Reputation: 1573

Scope change inside the function.

Cache the link object and refer to it inside of the ajax request.

Upvotes: 0

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 263047

The context of the click event handler (the object that this refers to in that handler) is not propagated to your AJAX success callback.

You can capture the value of this from the caller by assign it to a local variable, or you can explicitly propagate it by passing this in the context option to $.ajax():

$.ajax({
    url: window.config.AJAX_REQUEST,
    type: "POST",
    data: {
        action: "DELCOMMENT",
        comment: $("#commentText").val(),
        comment_id: $(this).attr("href")
    },
    context: this,
    success: function(result) {
        $(this).fadeOut("slow");  // Works, since 'this' was propagated here.
    }
});

Upvotes: 1

Frank van Wijk
Frank van Wijk

Reputation: 3262

You are in the AJAX function, so your have to assign the $(this) of the click function to a variable first if you want to use $(this) there

$('.commentDeleteLink').live('click', function(event) {
    ....
    var current = $(this);
    $.ajax({
        // You can use current here
    });
});

Upvotes: 0

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76890

You should try

$('.commentDeleteLink').live('click', function(event) {
    event.preventDefault();
    var result = confirm('Proceed?');
    var that = this;
    if ( result ) {
        $.ajax({
            url: window.config.AJAX_REQUEST,
            type: "POST",
            data: { action       : 'DELCOMMENT',
                    comment      : $('#commentText').val(),
                    comment_id   : $(this).attr('href') },
            success: function(result) {
                alert($(that).attr('href'));
                //$(that).fadeOut(slow);
            }
        });
    }
});

because this in the callback is not the clicked element, you should cache this in a variable that that you can re-use and is not sensible to the context

Upvotes: 2

AsTeR
AsTeR

Reputation: 7541

$(this) is called using this inside of the function. Here is the fix :

$('.commentDeleteLink').live('click', function(event) {
    var myRef = this;

    event.preventDefault();
    var result = confirm('Proceed?');

    if ( result ) {
        $.ajax({
            url: window.config.AJAX_REQUEST,
            type: "POST",
            data: { action       : 'DELCOMMENT',
                    comment      : $('#commentText').val(),
                    comment_id   : $(this).attr('href') },
            success: function(result) {
                alert($(myRef).attr('href'));
                //$(this).fadeOut(slow);
            }
        });
    }
});

Upvotes: 1

Related Questions