jQuery ajax this.id undefined

Question

I have a list of items I delete using AJAX.

This list is a simple list with divs and each div as an id so when the item is removed from the database I return true and then it removes the line.

Here my code:

HTML

<div id="row1">
<div>item1</div>
<div><a href="...">view</a></div>
<div><a id="1">delete</a></div>
</div>

JS

$('.delete').click(function () {
    if (!confirm('Are you sure you want to delete?')) {
        return false;
    }
    $.ajax({
        type: "POST",
        url: '/delete_record',
        data: 'id=' + this.id,
        cache: false,
        success: function (result) {
            if (result == 'good') {
                $('#row' + this.id).remove();
            }
        }
    });
});

For some reason the this.id does not work because this.id is undefined ... why? I have id="1" on my a href.

There is no elements that have the class `.delete`, and if there was you would need to save the reference to `this` in the click handler, and refer to that inside the success handler. — Esailija, Nov 18 '11 at 18:16
possible duplicate of [$(this) inside of AJAX success not working](http://stackoverflow.com/questions/6394812/this-inside-of-ajax-success-not-working) — Matt Ball, Sep 25 '13 at 15:40

score 14 · Accepted Answer · answered Nov 18 '11 at 18:17

The this you are using refers to the ajax object because there is a new scope within that function. If you want to access variables outwide your scope, you have to declare them before the ajax call.

$('.delete').click(function () {
    if (!confirm('Are you sure you want to delete?')) {
        return false;
    }
    var _this = this;
    $.ajax({
        type: "POST",
        url: '/delete_record',
        data: 'id=' + this.id,
        cache: false,
        success: function (result) {
            if (result == 'good') {
                $('#row' + _this.id).remove();
            }
        }
    });
});

score 4 · Answer 2 · edited May 23 '17 at 11:57

Your ID should not start with a number. Here is how to formulate a valid id: What are valid values for the id attribute in HTML?

this within your success callback function does not refer to the this in your click handler function. So you need to make a reference to this in your click handler so it can be accessed in your callback function:

$('.delete').click(function () {
    if (!confirm('Are you sure you want to delete?')) {
        return false;
    }
    var that = this;
    $.ajax({
        type: "POST",
        url: '/delete_record',
        data: 'id=' + this.id,
        cache: false,
        success: function (result) {
            if (result == 'good') {
                $('#row' + that.id).remove();
            }
        }
    });
});

I'm all ears about the down-vote. Just wondering how to improve my knowledge. — Jasper, Feb 22 '13 at 18:26

Ricardo Binns · Answer 3 · 2011-11-18T18:30:38.933

0

try to declare before the $.ajax the $this

like:

var $this = this;

and use the variable.

$('.delete').click(function () {
   var $this = this;

  if (!confirm('Are you sure you want to delete?')) {
      return false;
  }

  $.ajax({
      type: "POST",
      url: '/delete_record',
      data: 'id=' + $this.id,
      cache: false,
      success: function (result) {
          if (result == 'good') {
              $('#row' + $yourid).remove();
          }
      }
 });
});

edited Nov 18 '11 at 18:30

answered Nov 18 '11 at 18:13

Ricardo Binns

3,228
6
44
71

Good point but you probably don't need to wrap the `this` variable in a jQuery object since all that's needed is the ID. How about: `var that = this;` since you can use `that.id` in the AJAX callback function. – Jasper Nov 18 '11 at 18:18
When you're getting the id of an element it creates far less overhead to do `var $thisId = this.id` instead of wrapping `this` in a jQuery object. – Jasper Nov 18 '11 at 18:25

score 0 · Answer 4 · answered Nov 18 '11 at 18:14

$('.delete').click(function () {
    if (!confirm('Are you sure you want to delete?')) {
        return false;
    }

    var id = this.id; // here is the magic

    $.ajax({
        type: "POST",
        url: '/delete_record',
        data: 'id=' + this.id,
        cache: false,
        success: function (result) {
            if (result == 'good') {
                $('#row' + id).remove();
            }
        }
    });
});

score -1 · Answer 5 · answered Nov 18 '11 at 18:14

-1

I don't see any element with a class of 'delete' in your html. Assuming it's the delete link, you need to get the id with $(this).attr('id') instead of this.id.

answered Nov 18 '11 at 18:14

Calvin Froedge

16,135
16
55
61

2

`this.id` returns the id without creating extra overhead making a jQuery object. – Jasper Nov 18 '11 at 18:21

jQuery ajax this.id undefined

5 Answers5

Linked