How to call an externally defined function from a local scope?

[ninian1927]

Hi All,

I have been battling with this same issue for a while and can’t find a good answer or explanation on what I am meant to do. I might not have explained the issue well in the title, but essentially I am using RequireJS and I have a javascript page with the following relevant code:

define(['ojs/ojcore', 'knockout', 'jquery', 'dataService', 'mapping', 'appController', 'ojs/ojknockout', 'ojs/ojmodel', 'ojs/ojbutton', 'ojs/ojinputtext', 'ojs/ojmodule', 'ojs/ojknockout-validation', 'ojs/ojrouter', 'ojs/ojmoduleanimations'],
        function (oj, ko, $, data, mapping, app) {
             
            function LoginContentViewModel() {
                var self = this;
                self.username = ko.observable();
                self.password = ko.observable();
                self.tracker = ko.observable();

                    var login = data.login(self.username(), self.password());
                    login.done(function (response) {
                        //  data.login(self.username, self.password).then(function (response) {
                        app.processUserProfile(response);
                        });
                    });
                    login.fail(function (response) {
                        **var test = data.retrieveError();**
**                        return data.retrieveError(response.status);** 
                    });
                };
            }
            return new LoginContentViewModel();
        });

The relevant portion of the code is in the login.fail section. I am trying to call a function in an external js file that is defined in the define block above as data which represents the dataService file. When I do this I get the error “TypeError: data.retreieveError is not a function”. I know I must be way off base with my knowledge of scoping here, I have read countless articles but can’t seem to find anything that matches my issues. The file I am trying to call a function from dataservice/data has just a bunch of functions in it. This is the function I am trying to call:

    function retrieveError(errorCode) {
        switch (errorCode) {
            case "400":
                return "Bad Request - Invalid JSON Input";
            case "403":
                return "Authorization Failure - Invalid Credentials";
            default:
                return "Unknown Error " + errorCode;
        }
    }

How can I accomplish what I am trying to do? Thanks for your time, its much appreciated.

[Andres_Vaquero]

Hi, by looking at your code I’m not sure what is the problem but it looks like retrieveError is defined in the global scope. If so it doesn’t make sense to call data.retrieveError as data will not have that function defined inside of it. If calling just retrieveError without prepending data to it doesn’t work try calling window.retrieveError.

Most scope problems can be circumvented with the function call (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call) and the function bind (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind)

Also a personal note about require JS: I did not find it to be that useful and has a lot of redundancy. You can probably achieve the same by writing your own simple function like the following:

function addScript(src) {
	var script = document.createElement("script");
	script.setAttribute("src", src);
	document.body.appendChild(script);
}

But then I’m not sure exactly all that you’re doing with it. Most of the times you wouldn’t use a sledgehammer to crack a nut.