Accessing the this context in an AJAX call that is not the callback?

Question

I have an AJAX call, where I use a variable bound to this in my URL call. I also need this in the callback.

Initially I was using the var _that = this pattern, but that didn't pass code review. I threw in the context: this, but unsure if it works on that second link, where I need to actually access this or if it's only available in the callback.

Question:

What is the cleanest approach for accessing the this context variable to use in the url param and also the callback?

    $.ajax({
        url: "/search/".concat(_this.options.modelId),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        type: 'PUT',
        data: JSON.stringify(templatePerms),
        context: this,
        success: function(data) {
            this.message('Success!', 'Updated', 'success');
            this.cleanup();
        }
    });

If you save it in `context` then you would access it via `this.context`. A better question would be: Why didn't `var _that = this;` pass code review? That is a fairly standard practice. — nurdyguy, Apr 18 '18 at 16:11
As a side note, if you are building the url then I would probably set it in a variable and just use the variable rather than doing it inline with the `_this.options` reference. But, that is largely preference/style. — nurdyguy, Apr 18 '18 at 16:14
Interesting the `_that` doesn't pass code review but the misuse of `concat()` does pass. Question should be about the code review! — Randy Casburn, Apr 18 '18 at 16:16
Thanks guys for the comments. I actually agree that concat() is oddly used here, not really sure why I chose that route. Bunch of backend guys here writing frontend code. — John Lippson, Apr 18 '18 at 16:18
"*didn't pass code review*" - surely your reviewer told you which alternative is preferred. If he didn't, ask him - not us. — Bergi, Apr 18 '18 at 16:18
In the url, you definitely should be using standard `this`, not `_that` or `_this` or any workaround. — Bergi, Apr 18 '18 at 16:19

score 0 · Answer 1 · answered Apr 18 '18 at 16:19

0

Instead of creating an extra variable (e.g. _this), utilize Function.bind() passing this as the thisArg:

success: function(data) {
    this.message('Success!', 'Updated', 'success');
    this.cleanup();
}.bind(this)

answered Apr 18 '18 at 16:19

Sᴀᴍ Onᴇᴌᴀ

8,218
8
36
58

Yes, but can this still be used outside the callback in the AJAX function? That is ultimately my question. – John Lippson Apr 18 '18 at 16:29
My initial answer is _yes_ but based on your question there may be other issues here... I would need to see more code than just the `$.ajax()` call... – Sᴀᴍ Onᴇᴌᴀ Apr 18 '18 at 16:32

score 0 · Answer 2 · answered Apr 18 '18 at 16:36

class Test {
  constructor() {
  this.options = {};
    this.options.modelId = '1';
    this.doIt();
  }

  doIt() {
    $.ajax({
      url: 'https://jsonplaceholder.typicode.com/posts/' + this.options.modelId,
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      type: 'PUT'
    })
    .then(data=>this.success.call(this, data));
  }

  success(data) {
    this.message(data);
  }

  message(msg) {
    alert(msg.id);
  }

}
new Test();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Accessing the this context in an AJAX call that is not the callback?

Question:

2 Answers2