如何在ajax成功函数中调用函数方法？

Question

How to call pagePresets.setFilter() inside $.ajax(){success} method?

self.setFilter.call('network', data.networks); returns

Uncaught TypeError: Cannot read property 'call' of undefined(…)

when self.setFilter('network', data.networks);

Uncaught TypeError: self.setFilter is not a function(…)

Code:

function pagePresets() {
    this.loading = true;
    this.isLoading = function () {
        return this.loading;
    };
    this.setLoading = function (state) {
        this.loading = state;
        return;
    };
    /** this function loads saved filters */
    this._loadFilters = function() {
        jQuery.ajax({
            type: 'post',
            dataType: "json",
            url: 'data.json',
            success: function (data) {
                //HOW TO CALL setFilter? this solution is not working
                pagePresets.prototype.setFilter.call('network', data.networks);
            }
        });
    };
}

pagePresets.prototype.setFilter = function (target, value) {
 console.info(target + ' ' + value );
}

Answer 1

The call function takes as first argument a "context object". Take a deeper look at the call function here .

In the ajax callback function this or self doesn't refere to your class object anymore. And pagePresets is a function class with no static properties. So you need to get the object instance.

You need to specify which instance you want to call your prototype function with. I usualy declare a private property in my "class" wich holds a reference to the object for such scenarios where the context changes.

function pagePresets() {
    //create a local variable here
    var localInstance = this;

    this.loading = true;
    this.isLoading = function () {
        return this.loading;
    };
    this.setLoading = function (state) {
        this.loading = state;
        return;
    };
    /** this function loads saved filters */
    this._loadFilters = function() {
        jQuery.ajax({
            type: 'post',
            dataType: "json",
            url: 'data.json',
            success: function (data) {
                //Use the variable here to specify the correct context.
                //the functions arguments need to be an array for the call function
                pagePresets.setFilter.call(localInstance, [ 'network', data.networks ]);
            }
        });
    };
}

pagePresets.prototype.setFilter = function (target, value) {
    console.info(target + ' ' + value );
}

Answer 2

you can try to invoke that in the another function like this

function success() {
    pagePresets.prototype.setFilter.call('network', data.networks);
}

function error() {
    alert("error");
}


function searchEntity(id,userName, family) {
    $.ajax({
        type : "POST",
        contentType : "application/json",
        url : "http://localhost:8080/mvc-test/rest/user/searchAll?pageNumber=1&pageSize=2&&orderBy=userName asc",
        headers: {'X-CSRF-TOKEN': getMetaContentByName('_csrf')},
        data : JSON.stringify({
            "id":id,
            "userName" : userName,
            "familyName" : family
        }),
        dataType : 'json',
        success : success,
        error : error
    });
}

Answer 3

Another way is to pass the parent context into the success method or delegate.

In the code below, onAjaxResponseReceived function is called with with the reference to the parent (class) context self from which other methods func1 and func2 can be accessed.

class TestClass{
    constructor(searchUrl) {
        this.searchUrl = searchUrl;
    }

    bind() {
        self = this;

        $.ajax({
            url: self.searchUrl,
            type:"POST",
            data: data,
            success: function (responseData) {
                self.onAjaxResponseReceived(self, responseData);
            }
       });
    }

    onAjaxResponseReceived(self, data) {
        self.func1(data);
        self.func2(data);
    }

    func1(data) {
        console.log('func 1');
    }

    func2(data) {
        console.log('func 2');
    }

}