Question

I am having some trouble calling a javascript function inside of the html page. When I move the function inside the linked/external file it works fine. Can anyone help with this?

Here is my external file.js

function request_token(session) {
    $.ajax({
        url: api_url, 
        data: {api_id: api_id},
        dataType: "jsonp",
        jsonp : "callback",
        success: function(data) {
            var token = data.token;
            alert(token)
        }
    }); 
};

And here is just the simple call to the function that I want to load once the document is ready…

<script>
$(document).ready(function() {
    request_token('1234');
});
</script>

When I move request_token(‘1234’); into the file external file, it works fine

Answer 1

use jQuery’s getScript() function.

<script>
    $(document).ready(function() {
        $.getScript('external.js');
        request_token('1234');
    });
</script>

Reference