Variable inside loaded JavaScript can't be called even though it's loaded

Question

Can anyone help me out with this one?

If i have this working example:

var Login = function() {

var handleLogin = function() {//code here   

}

var handleForgetPassword = function() {//code here     
}

var handleRegister = function() {//code here 
}

return {
    init: function() {

        handleLogin();
        handleForgetPassword();
        handleRegister();

    }

};

}();

jQuery(document).ready(function() {
    Login.init();
});

But the next example gives an error. Even though I'm sure the file is loaded. I can't scope the function.

<script src="javascriptLoginfile.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function() { 
    Login.init();
});
</script>

Error

Uncaught ReferenceError: Login is not defined at HTMLDocument. (login:160) at i (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at Function.ready (jquery.min.js:2) at HTMLDocument.K (jquery.min.js:2)

Maybe there's some error on javascriptLoginFile.js that is stopping the execution before Login is fully instantiated? — Bardo, Aug 31 '17 at 07:24
The file you mentioned is exactly the same file, except for this part at the end. jQuery(document).ready(function() { Login.init(); }); — Stefan Leemans, Aug 31 '17 at 07:26
I have verified your code and is working fine i.e. Login function code in a separate JS file and invoking the function from html page, on jQuery document ready. No problems (tested locally on my machine). — Phani Kumar M, Aug 31 '17 at 07:28
I am confused as to what you are trying to achieve here. Either way you would be better off looking into how the prototype object works, also are you using any IDE or JavaScript linter? They will probably help you out by pointing out some syntax errors which I believe is the issue there. — Carlos F, Aug 31 '17 at 07:31
Using Sublime 3 with Linter, no errors. @PhaniKumarM thanks for verifying. It must has something to do with previous loaded script probably than. I'll look into it. Thanks so far! — Stefan Leemans, Aug 31 '17 at 07:41
I found out that webpack is causing this issue. Solution is found here: https://stackoverflow.com/questions/34357489/calling-webpacked-code-from-outside-html-script-tag — Stefan Leemans, Aug 31 '17 at 07:54

score 1 · Answer 1 · answered Aug 31 '17 at 08:02

Works for me.

var Login = function() {

  var handleLogin = function() { //code here   
    console.log('handleLogin');
  }

  var handleForgetPassword = function() { //code here     
    console.log('handlForgetPassword');
  }

  var handleRegister = function() { //code here 
    console.log('handleRegister');
  }

  return {
    init: function() {

      handleLogin();
      handleForgetPassword();
      handleRegister();

    }

  };

}();

jQuery(document).ready(function() {
  Login.init();
});

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

score -1 · Answer 2 · answered Aug 31 '17 at 08:32

-1

Because webpack is bundling everything, I could not call from outside the bundled script.

I resolved this changing:

var Login = function() { }

To:

window.Login = function () { }

answered Aug 31 '17 at 08:32

Stefan Leemans

11
1

Variable inside loaded JavaScript can't be called even though it's loaded

2 Answers2