Javascript/JQuery: Variable Undefined After Performing Ajax

Question

In the console.log, I can see that this.id is undefined after the Ajax call. I would still like to use the id of .home after that. I know I can again still perform $('.home').attr('id') in the .done section but that would be repeating the same code again. Is there a better/more efficient way of calling this.id (the id of .home) inside .done? I have placed the JavaScript file at the bottom of the <body> tag.

JQuery

$(".home").submit(function(e) {
  e.preventDefault();
  e.stopPropagation();
  var sendData = {
        //Some data
      };
  var url = "/home" + this.id;
  $.ajax({
      url: url,
      type: "POST",
      contentType: "application/json",
      data: JSON.stringify(sendData)
  }).done(function(result){
      //This shows undefined.
      console.log(this.id)
  })
});

How do you know that 'this.id' exists at all? Have you tested it before the url attempts to use it? I suspect that 'this' in .done is not the same as 'this' when called by the submit method...try console.dir(this) ; in each method to see the contents. — SPlatten
– SPlatten, Commented Mar 16, 2018 at 7:51

Martin Vich · Accepted Answer · 2018-03-16 08:01:18Z

3

Problem is that this behaves little bit differently than in other languages. You have two options:

Either you can put id into variable

var id = this.id;
$.ajax({
  url: url,
  type: "POST",
  contentType: "application/json",
  data: JSON.stringify(sendData)
}).done(function(result){
  console.log(id)
})

or you can bind this

var onDone = function(result) {
  console.log(this.id)
}
$.ajax({
  url: url,
  type: "POST",
  contentType: "application/json",
  data: JSON.stringify(sendData)
}).done(onDone.bind(this));

this way your this will stay the same

answered Mar 16, 2018 at 8:01

Martin Vich

1,0921 gold badge7 silver badges23 bronze badges

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

Comments

Striped · Accepted Answer · 2018-03-16 07:50:17Z

2

You need to store your id before the ajax request like :

$(".home").submit(function(e) {
  e.preventDefault();
  e.stopPropagation();
  var sendData = {};
  var id = this.id;
  var url = "/home" + id;
  $.ajax({
      url: url,
      type: "POST",
      contentType: "application/json",
      data: JSON.stringify(sendData)
  }).done(function(result){
      console.log(id)
  })
});

answered Mar 16, 2018 at 7:50

Striped

2,5443 gold badges27 silver badges33 bronze badges

Collectives™ on Stack Overflow

Javascript/JQuery: Variable Undefined After Performing Ajax

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related