CODEWITHSUNDEEP
javascriptjqueryajaxobject
Fil
Fil

Reputation: 8873

How to call a method of a javascript object inside ajax

Given this code,

var submit = {
  send:function (form_id) {
    var url = $(form_id).attr("action");
    $.ajax({
      type: "POST",
      url: url,
      data: $(form_id).serialize(),
      dataType: 'json',
      success: function(result) {
        this.ret(result.message);
      },
      error: function(result) {
        // Some error message
      }
    });
  },

  ret:function (result) {
    this.result_data = result;
  },

  result_data:""
};

will send a data from the form to a controller which if will return a json

$result['message'] = validation_errors();
echo json_encode($result);

I try to call this javascript object in this code,

var res = submit.send(form_id);

wherein form_id is the form id, and look for the output using 

console.log(res);

In the console, it shows undefined. After searching for an explaination using google and stackoverflow itself I got the idea that,

this.ret(result.message);

is being called inside ajax which is another object, indicating that it's not part of it's method.

My problem is, how to call the method ret() inside ajax?

Is anyone can explain it to me?

Upvotes: 4

Views: 3770

Answers (5)

dmi3y
dmi3y

Reputation: 3532

There is several ways to deal with it.

One is ES5 compatible (and this is actually quite common pattern):

var submit = {
send: function (form_id) {
  var url = $(form_id).attr("action");
  var self = this; // << this is binded to self varialble
  $.ajax({
    type: "POST",
    url: url,
    data: $(form_id).serialize(),
    dataType: 'json',
    success: function(result) {
      self.ret(result.message); // << replaced this to self so it has all the methods from the submit object.
    },
    error: function(result) {
      // Some error message
    }
  });
},

ret:function (result) {
  this.result_data = result;
},

result_data:""
};

And another is using arrow function from ES2015 plus deferred object returned by $.ajax:

var submit = {
send: function (form_id) {
  var url = $(form_id).attr("action");
  $.ajax({
    type: "POST",
    url: url,
    data: $(form_id).serialize(),
    dataType: 'json'
  })
  .then((result) => {
    this.ret(result.message); // << arrow function is called in context of the parent function, so no needs to change anything.
  })
  .fail(function(result) {
    // Some error message
  });
},

ret:function (result) {
  this.result_data = result;
},

result_data:""
};

Explanation: context of this in callback function will be bind to global scope not to the object's one. So you need somehow to change it.

You can actually match and mix these two methods.

You can also use bind or put success as a object method. As it mentioned in other answers. Same thing, you want to keep this to be object's context.

There is a good article about this in javascript.

Upvotes: 2

Deepak Garg
Deepak Garg

Reputation: 142

In the submit define

self = this

And then use ret() with self: self.ret()

Upvotes: 1

dec
dec

Reputation: 604

I have a small code fragment, that simulates this:

var submit = {
  send:function (form_id) {
    var self = this;
    setTimeout(function()
    { 
      console.log('send', this);
      self.ret('message'); //will do
      //submit.ret('message'); //will do
        //this.ret('message'); this.ret is not a function
      //ret('message'); ret is not defined
    }, 0);    
  },

  ret:function (result) {
    console.log('ret', result, this)
    this.result_data = result;
  },

  result_data:""
};

There you can see your possible choices to handle this.

Or use this fiddle: https://jsfiddle.net/syqjwk2q/#&togetherjs=mpwEnNDeIJ

Upvotes: 1

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

You've two options.

1. The "bind()" method (recommended)

The method bind is for changing the context of a function. From the docs:

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

Here the bind will change the context of success function with the reference of this i.e. the submit.

$.ajax({
  type: "POST",
  url: url,
  data: $(form_id).serialize(),
  dataType: 'json',
  success: function(result) {
    this.ret(result.message);
  }.bind(this),                  // <== bind method
  error: function(result) {
    // Some error message
  }
});

That .bind(this) can also be written as .bind(submit);

2. Using the scope variable

Since you already have access to the submit variable, why not directly call with submit instead of this

$.ajax({
  type: "POST",
  url: url,
  data: $(form_id).serialize(),
  dataType: 'json',
  success: function(result) {
    submit.ret(result.message);
  }.bind(this),
  error: function(result) {
    // Some error message
  }
});

Upvotes: 2

Vikash Kesarwani
Vikash Kesarwani

Reputation: 850

success: function(result) {
    this.ret(result.message);
}

In the above block the this refers to the function you are operating in. To use ret method you should use it submit.ret.

Upvotes: 1

Related Questions