Object prototype doesn't recognize function

Question

I have 3 functions on an object prototype:

Job.prototype.postData = function(url) {
  this.getFormData();
  var formdata = new FormData();
  formdata.append("position", this.position);
  formdata.append("team", this.team);
  formdata.append("details", this.details);
  $.post(url, formdata, function(response) {
    alert(response.message);
    window.location.href = '/';
  });
};

Job.prototype.createNew = function() {
  var newUrl = API_URL + "/add_listing";
  this.postData(newUrl)
};

Job.prototype.update = function() {
  var updateUrl = API_URL + "/edit_listing" + "?id=" + this.id;
  this.postData(updateUrl)
};

I'm attaching the last two as event handling callbacks:

$('#list-button').on('click',job.createNew);
$('#list-button').on('click',job.update);

Both of those give a TypeError:

oop.js:38 Uncaught TypeError: this.postData is not a function

*I'm attaching the last two as event handling callbacks.* You are probably losing the context. Try to `bind` the function objects with the actual `Job` object — thefourtheye, Jun 10 '16 at 07:01
@thefourtheye I have edited the question to include that code too. Can you show how to bind it? — ayushgp, Jun 10 '16 at 07:04
@thefourtheye It gives an error: `Uncaught TypeError: Illegal invocation` — ayushgp, Jun 10 '16 at 07:07
You mean `$('#list-button').on('click', job.createNew.bind(job));` didn't work? — thefourtheye, Jun 10 '16 at 07:08
@thefourtheye sorry for the confusion. Some other part of the `postData` function was giving an error. Thanks for the solution! — ayushgp, Jun 10 '16 at 07:30

score 1 · Accepted Answer · edited May 23 '17 at 12:22

1

The problem is simply that the this context gets lost the way you're binding the event handler.

Either explicitly bind the context, or call the function in a way that preserves the context:

$('#list-button').on('click', function () { job.createNew(); });
$('#list-button').on('click', job.createNew.bind(job));

See How does the "this" keyword work?.

edited May 23 '17 at 12:22

Community

1
1

answered Jun 10 '16 at 07:05

deceze

471,072
76
664
811

*this* belongs to the execution context, it isn't **the** context. ;-) – RobG Jun 10 '16 at 07:08

Object prototype doesn't recognize function

1 Answers1