Search code examples
javascriptjqueryhtmlhttphandlebars.js

JavaScript function is undefined although it's loaded

I'm doing my homework for a JS course and I face a strange problem. I've made a request 'module' that I'm at the very beginning right after jquery then I'm loading the essential js scripts but when I try to use a function from the request module in another script file it always throws a TypeError undefined. The strange is that when I console.log the object it is' not undefined and everything is all right. I can't seem to figure it out why this is happening ... and I need some guideline

Here is part of the code:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SeenIt</title>
    <link rel="stylesheet" href="style/site.css">
    <link rel="stylesheet" href="style/post.css">
    <link rel="stylesheet" href="style/header.css">
    <link rel="stylesheet" href="style/menu.css">
    <link rel="stylesheet" href="style/notifications.css">
    <link rel="stylesheet" href="style/submit.css">
    <link rel="stylesheet" href="style/comments.css">
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="./scripts/request.js"></script>
    <script src="../node_modules/handlebars/dist/handlebars.min.js"></script>
    <script src="./scripts/pageView.js"></script>
    <script src="./scripts/app.js"></script>

</head>
<body>
<div id="container">
</div>
</body>
</html>

My JS Request Module

let request = (function (){
    const appKey = 'kid_rkR4UTRnb';
    const appSecret = 'd3e9f15502a740fcb1413d7ffe109ab5';
    const baseUrl = 'https://baas.kinvey.com';

    function createAuth(type)
    {
        let authorize = {"Content-Type": "application/json"};
        if(type === 'basic')
        {
            authorize.Authorization = "Basic " + btoa(appKey + ':' + appSecret);
        }
        else if(type === 'kinvey')
        {
            authorize.Authorization = "Kinvey " + localStorage.getItem('authtoken');
        }

        return authorize;
    }

    function makeRequest(destination, endpoint, method, authorization, data)
    {

        let req = {
            url: baseUrl + '/' + destination + '/' + endpoint,
            method: method,
            headers: createAuth(authorization),
        };

        if(data != undefined) req.data = JSON.stringify(data);

        $.ajax(req);
    }

    function register(username, password)
    {
        let data = {
            "username": username,
            "password": password
        };

        return makeRequest('user', appKey, 'POST', 'basic', data);
    }

    function logIn(username, password)
    {
        let data = {
            "username": username,
            "password": password
        };

        return makeRequest('user', appKey + '/login', 'POST', 'basic', data);
    }

    function logout()
    {
        makeRequest('user', appKey + '/_logout', 'POST', 'kinvey');
    }

    return {
         createAuth,
         register,
         logIn,
         logout
    }

})();

Main JS App file

$(() => {
    let main = $('#container');
    initialState();

    $(document).ajaxStart(() => $('#loadingBox').show());
    $(document).ajaxComplete(() => $('#loadingBox').hide());
    $('#infoBox').click(() => $('#infoBox').hide());
    $('#errorBox').click(() => $('#errorBox').hide());

    $(document).on('submit', '#loginForm', login);

    async function viewPage(page)
    {
        if(page == 'home')
        {
            main.html(await loadWelcome(isLoggedIn()));
        }
    }
    // initial functions
    function initialState()
    {
        viewPage('home');
    }
    ///////////////

    // session control
    function login(e)
    {
        e.preventDefault();
        let loginForm = $(this);
        let name = loginForm.find('input[name="username"]').val();
        let password = loginForm.find('input[name="password"]').val();

        request.logIn(name, password) // TYPEERROR UNDEFINED ?!?
        .then(data => {
            request.saveSession(data);
            this.reset();
            viewPage('home');
        })
    }
});
Solution

  • It crashes when you try to invoke the then() method because the request.logIn() function returns undefined instead of a promise. This can be traced to the makeRequest() function which doesn't return anything, i.e. undefined.

    Your last line in the makeRequest() function needs to be:

    return $.ajax(req);