Accessing function in another .js file with $.getScript

Question

I'm having a problem regarding accessing a function from one js file to another.

I have tried using jquery to solve this problem, but it does not seems to work. My console in the browser just logs:

http://localhost:58763/orderPicking.js?_=1460542934750 404 (Not Found).

XHR finished loading: GET "http://localhost:58763/orderPicking.js?_=1460542934750".

My js looks like this. This is the one with the function that i want to access from another .js file

    function HelloWorld() {
    //print Hello World  
    alert("hello world!");
}

The other .js file(The one that should be able to access the function) looks like this.

    test();

function test() {
    $.getScript('orderPicking.js', function () {
        HelloWorld();
    });
}

I have added this to my index.html

<script type="text/javascript" src="views/OrderPicking/orderPicking.js"</script>
<script type="text/javascript" src="views/OrderPicking/orderLines.js"></script>

I hope you guys can help me troubleshooting the problem.

Are you sure the file name/location is correct? Perhaps it's in a subfolder etc? The browser/server is reporting it's unable to find the file at that location. — James Thorpe, Apr 13 '16 at 10:28
Yes I think they are correct, they are both placed in the same folder, the path looks like this "views/OrderPicking/"Both files are placed here" — , Apr 13 '16 at 10:32
create a simplified example and put it up on jsfiddle or similar. i think you will solve your own problem by doing so in the process. — datashaman, Apr 13 '16 at 10:33
I just tried to change the path to this function test() { $.getScript('views/OrderPicking/orderPicking.js', function () { HelloWorld(); }); } Now I'm getting: Error: 'Uncaught ReferenceError: HelloWorld is not defined', line 13, file 'http://localhost:58763/views/OrderPicking/orderLines.js' — , Apr 13 '16 at 10:34
@datashaman Thanks for your reply, but jsfiddle is limited to 1 js/html/css file. I need two .js files. — , Apr 13 '16 at 10:50
Pass data as a parameter to the callback function of get script and console log it out. That should be the JavaScript of that file. Also, is orderLines the one that has the test() in? Remove orderPicking inclusion in the index.html if you're calling it dynamically — Shakespeare, Apr 13 '16 at 11:12
I passed data as a parameter and as you mentioned that is my orderPicking.js file. ordereLine is the one with the test(), yes. — , Apr 13 '16 at 11:21
Strange. Would you be able to post the entire contents of your orderPicking file somewhere? If HelloWorld is still undefined, but that console log consoles out the code, then maybe HelloWorld is not within the correct scope? — Shakespeare, Apr 13 '16 at 11:30
Yes here is the complete orderPicking.js file https://jsfiddle.net/v397c2mm/ — , Apr 13 '16 at 11:40
By doing so i get following error Error: 'Uncaught TypeError: CommIT.orderPicking(...).HelloWorld is not a function', — , Apr 14 '16 at 07:32

Shakespeare · Answer 1 · 2016-04-13T11:23:44.580

The path will be relative to the page it's loaded from (not the path of your init script) since that's the url the browser will be at when it executes the ajax request.

Make sure your jQuery code is happening after the document is ready (make sure there's some sort of check for this, simply $(document).ready(function () { // code }); would suffice). Assuming it is ready, the below should work fine.

function test() {
    $.getScript('views/OrderPicking/orderPicking.js', function (data) {
        console.log(data); // should be the js file contents
        HelloWorld(); // should alert
    });
}

If you are using jQuery 1.5+, it's best to use the done and fail callbacks like so:

$.getScript('views/OrderPicking/orderPicking.js')
  .done(function (script) {
      HelloWorld();
  })
  .fail(function (jqxhr, settings, exception) {
      console.log('something went wrong!');
  });

Thanks for your reply I'm getting: Error: 'Uncaught ReferenceError: HelloWorld is not defined'. I've tried both ways. — , Apr 13 '16 at 11:32

datashaman · Accepted Answer · 2016-04-18T13:32:39.290

0

Place this code in index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getScript example</title>
</head>
<body>
    <div id="panel"></div>

    <script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script src="orderLines.js"></script>
</body>
</html>

Place this code in orderLines.js in the same folder:

$(function() {
  $.getScript('orderPicking.js', function() {
    HelloWorld();
  })
})

Place this code in orderPicking.js in the same folder:

function HelloWorld() {
    $('#panel').html('<h1>hello world!</h1>');
}

Use a command-line utility to run a server (while in same folder). NB: File protocol will not work, you must use a server for this:

php -S localhost:8080

Browse to http://localhost:8080, and you should see hello world!.

Above code is in a gist, altered slightly to show an on-page message instead of an alert.

The gist code running on bl.ocks.org. It's a sandboxed environment that does not allow alert calls, so I changed it to add an h1 tag instead.

NB getScript URL parameter is relative to the root of the site. So in your case, you must use getScript('views/OrderPicking/orderPicking.js', ...) for this to work.

edited Apr 18 '16 at 13:32

answered Apr 16 '16 at 08:14

datashaman

8,301
3
22
29

Thanks for your answer but how can I call the function from another .js file? – Apr 18 '16 at 08:52
Edited to call the function from another file. Like that? – datashaman Apr 18 '16 at 10:38
Thank you for you reply. When i try that I get a 404 error, it seems like it isn't able to find orderPicking.js. – Apr 18 '16 at 10:52
It works, you're not putting all the files in one folder. Please tell me where each of the files is supposed to be. And bear in mind that you should be changing your question to match what you're telling me. It's not very clear what you're trying to achieve. – datashaman Apr 18 '16 at 10:55
I've placed the index.html file in a project folder called CommIT.Mobile and inside this folder i got /views/OrderPicking/"Both js files(orderPicking & orderLines) are placed here". What I'm trying to do is to access a function from orderPicking.js inside orderLines.js – Apr 18 '16 at 11:19
Ok, I've discovered your issue. The getScript URL (if relative) is called from the root of the site, not relative to where the calling script is. So you should change *getScript('orderPicking.js')* to be *getScript('views/OrderPicking/orderPicking.js')*. – datashaman Apr 18 '16 at 13:30
I think your code is correct, when I try with the changes you mentioned I get following error. Error: 'Uncaught TypeError: Unable to process binding "dxSlideOut: function (){return { menuItemTemplate:$("#slideOutMenuItemTemplate"),contentTemplate:" "} }" Message: Cannot read property 'length' of undefined', line 72, file 'http://localhost:61041/js/knockout-3.4.0.js'. I think this problem is related to the framework I'm working within. – Apr 18 '16 at 13:54

Accessing function in another .js file with $.getScript

2 Answers2

Linked