How can I call an external JS function from a jQuery script?

Question

Back to the time I was using Node.js, I used to use fs.readFileSync(filename) to call my external functions, where filename is the name of the file to load.

It might be weird but now that I am using jQuery, I'm kind of lost...

Currently I am gathering up 3 different files (one is .html, the two others are .js), and here is how they look :

Here is test.html

<body>
    <button id="submitting_button">Valider</button>

    <!--//////////////////////-->
    <!-- Loads jQuery library -->
    <script src="jQuery/jquery.js"></script>
    <!-- Loads my jQuery script -->
    <script src="jQuery/process.js"></script>
</body>

Here is process.js

$(document).ready(function(){
    $('#submitting_button').click(function(){
        $.getScript("./functions/my_function.js");
        document.write(calculation());
    });
});

And finally, here is my_function.js

console.log("NOTE : my_function.js has been reached");
function calculation(){
    var result = 3+4;
    return result;
}

So when I click on the « Valider » button, nothing happens, except the fact that Chrome console displays an error, noticing me that calculation is not defined... I am guessing that is because using $.getScript() is not a good thing, but I don't know any other function to load/read an external function.

Use callback method of getscript i.e. $.getScript("./functions/my_function.js", function(){ document.write(calculation());}); — Satpal
– Satpal, Commented Aug 18, 2017 at 10:33

David · Accepted Answer · 2017-08-18 10:35:58Z

getScript() is asynchronous, so the next line of code is trying to execute before that operation is completed. Since the operation isn't completed, that function indeed doesn't exist yet.

(Note in your console that the error is happening before you log "my_function.js has been reached" to the console.)

Instead of executing it on the next line of code, execute it in the callback to getScript():

$.getScript("./functions/my_function.js", function () {
    document.write(calculation());
});

That way it's invoked after the asynchronous operation has completed.

Side note: document.write() may or may not do whatever you expect here. I'm honestly not sure where in the document this value would be written at this point. It's better to get away from document.write() and instead set the value to an existing element in the HTML. Something like:

$('#output').text(calculation());

where "output" would be the id of some element where you want to write the value:

<span id="output"></span>

Collectives™ on Stack Overflow

How can I call an external JS function from a jQuery script?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related