TypeScript: Uncaught TypeError: this.fnName is not a function

Question

I am working with Typescript and have an ajax call that on Success is calling another function \ method.

 deleteTheseSuccess(data) {
     new Fe.Upsm.Head().showGlobalNotification("Selected Items Deleted");
     this.refreshPrintQueueGrid(); <== this is there the error existst
     (window as any).parent.refreshOperatorPrintQueueCount();
 }

the method call that I have pointed out above is trying to call

refreshPrintQueueGrid() {
    $("#PrintQueueGrid").data("kendoGrid").dataSource.read();
    this.refreshPrintQueueStats();
}

This compiles without any issues in VS2017 and produces the JavaScript files accordingly

and this is the call in the JavaScript output

PrintQueue.prototype.refreshPrintQueueGrid = function () {
    $("#PrintQueueGrid").data("kendoGrid").dataSource.read();
    this.refreshPrintQueueStats();
};

The exact error that I get is

Uncaught TypeError: this.refreshPrintQueueGrid is not a function.

I would be grateful if anyone can help me understand what is going wrong here and what would cause this as I will have this in a number of places over my application.

--- Edit compiled code

PrintQueue.prototype.refreshPrintQueueGrid = function () {
            $("#PrintQueueGrid").data("kendoGrid").dataSource.read();
            this.refreshPrintQueueStats();
        }

--- Edit 2 -- Class

namespace Fe.Upsm {
export class PrintQueue {


    callingView: string

    constructor(callingView: string) {

        this.callingView = callingView;

        this.documentReadyObjects();

    }

    refreshPrintQueueGrid() {
        $("#PrintQueueGrid").data("kendoGrid").dataSource.read();
        this.refreshPrintQueueStats();
    }

    deleteThese(ids) {

        var jsonObj = {
            ids: ids
        }

        var dataAccess = new DataAccess.AjaxDataAccessLayer(Fe.Upsm.Enums.AjaxCallType.Post,
            Fe.Upsm.Enums.AjaxDataType.json,
            "../../PrintQueue/DeletePrintQueueItems",
            jsonObj);

        dataAccess.ajaxCall(this.deleteTheseError, this.deleteTheseSuccess);

    }

    deleteTheseSuccess(data) {
        new Fe.Upsm.Head().showGlobalNotification("Selected Items Deleted");
        this.refreshPrintQueueGrid;
        (window as any).parent.refreshOperatorPrintQueueCount();
    }

    deleteTheseError(xhr) {
        alert("An Error Occurred. Failed to delete print queue items");
    }



}

}

Can you post the entire function/ method where you're calling `this.refreshPrintQueueStats()`? It seems that you're not in the method of a class, and so `this` is not what you think. Try, also, to make a `console.log(this)` before calling the function that throws the error, and post what the console tells you — Oscar Paz, May 03 '18 at 15:55
in my opinion there is problem with "this" in many places - give us more code context. — Kamil Kiełczewski, May 03 '18 at 15:55
Is your first code snippet part of a method in the PrintQueue class? — NielsNet, May 03 '18 at 15:56
where you define `refreshPrintQueueGrid()` ? There is also some error in line: `window as any).` (unclosed bracket) — Kamil Kiełczewski, May 03 '18 at 15:57
@OscarPaz the this is calling the method in the same class. So in this instance this is the self (class) so in this class call this method. If i dont use this Visual Studio throws errors — Simon Price, May 03 '18 at 15:59
This could be a duplicate of https://stackoverflow.com/a/20279485/9356258 or at least solved by the docs linked there — NielsNet, May 03 '18 at 15:59
@SimonPrice, I'm sure that's what you think, and maybe what VS believes, but it's obvious it is not true. Please, do what I told you and you'll see — Oscar Paz, May 03 '18 at 16:01
Or at least, the compiled code for `deleteTheseSuccess`, and also, the code where you're calling this function. The problem might be in the calling. Are you passing `deleteTheseSuccess` as a callback? — Oscar Paz, May 03 '18 at 16:03
ok so remove that parts of class that are not important in this question but save the structure — Kamil Kiełczewski, May 03 '18 at 16:04
its there... i deleted that by accident when trimming the class — Simon Price, May 03 '18 at 16:07
You posted the same function. But anyway, the problem is, I think, in the way you're calling `deleteTheseSuccess`. How are you calling it? Are you passing it as a callback? — Oscar Paz, May 03 '18 at 16:07

Kamil Kiełczewski · Accepted Answer · 2018-05-03T17:04:46.407

2

The problem is that in your ajax callback

dataAccess.ajaxCall(this.deleteTheseError, this.deleteTheseSuccess);

method this.deleteTheseSuccess loose 'this' context (because ajax call it).

You can wrap this function by other that contains this as self variable and pass it to dataAccess.ajaxCall

EDIT

Try something like this (i write code from head so test it):

Add it to class PrintQueue following method

public deleteTheseSuccessWrapper() {
    let self = this;
    return () => { self.deleteTheseSuccess(); };
}

And use it in deleteThese method by:

dataAccess.ajaxCall(this.deleteTheseError, this.deleteTheseSuccessWrapper());

EDIT - version 2

as @estus point out in comments: Why is deleteTheseSuccessWrapper needed? we can try to omit it just by using fat-arrow:

dataAccess.ajaxCall(this.deleteTheseError, () => { this.deleteTheseSuccess() });

So we have oneliner solution - I write above code from head but I think it should also work

edited May 03 '18 at 17:04

answered May 03 '18 at 16:08

Kamil Kiełczewski

85,173
29
368
345

can you expand on your answer a little more please – Simon Price May 03 '18 at 16:09
its been a long day, can you give a fuller example? In the call back method, should I do something like `let self = this` and then in the called method that has an issue call it as this or the other way round? – Simon Price May 03 '18 at 16:12
I’m just driving now but will try in about 20 min – Simon Price May 03 '18 at 16:32
Why is deleteTheseSuccessWrapper needed? This is what native `bind` already does (and more). – Estus Flask May 03 '18 at 16:36

Estus Flask · Answer 2 · 2018-05-03T16:41:35.430

deleteTheseError and deleteTheseSuccess methods are passed as callbacks. As explained in related umbrella question, there are ways to bind them to proper this context.

It's possible to define these methods as arrow functions, but as this answer explains, a more universal way is to define them as prototype methods and bind them in class constructor:

constructor(callingView: string) {
    this.deleteTheseError = this.deleteTheseError.bind(this);
    this.deleteTheseSuccess = this.deleteTheseSuccess.bind(this);
    ...
}

Besides arrow methods, TypeScript also offers an option to use method decorators, e.g. from bind-decorator package. This provides a nicer syntax for .bind(this):

import bind from 'bind-decorator';

...
@bind
deleteTheseSuccess(data) {...}

@bind
deleteTheseError(xhr) {...}
...

I have just tried your approach as I am having a similar issue on other functions using the constructor to bind this and continue to face the same issue — Simon Price, May 04 '18 at 13:58

TypeScript: Uncaught TypeError: this.fnName is not a function

2 Answers2