Calling a JS function from a second file using ASP.NET

Question

I have an ASP.NET web application that makes use of a large Javascript file to enable front-end functionality. The issue is that since this web application is growing in size the Javascript file is growing in size along with it.

I want to remove some of my larger functions out of my main javascript file site.js and instead contain them inside a second file. My aim is to declutter the main JS file and increase readability etc.

If this were a normal web application I'm sure I'd be able to use JQuery to achieve this through use of the .getScript() however I've tried using this function to pull in a separate script with a simple alert function and I get a reference error saying that my alert function is undefined. I have included both scripts within my ASP.NET _Layout view, but still it doesn't work.

Below is what I am doing currently, what do I need to do to be able to call a JS function held inside another file from site.js?

site.js

$(function() {

    $(document).ready(function() {
        $.getScript("../site2.js");

        sendAlert();
    });

    //... other js

});

site2.js

$(function() {

    function sendAlert() {
        alert("site2 file");
    }

});

_Layout

<!DOCTYPE html>
<html>
<head>
    <script src="~/js/site2.js"></script>
    <script src="~/js/site.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css" integrity="sha384-88btmYK8qOHy4Z2XuhkWZjUOHICKYe1eSDMwaDGOAy802OCu6PD6mwqY5OwnfGwp" crossorigin="anonymous">
    <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js" integrity="sha384-3LK/3kTpDE/Pkp8gTNp2gR/2gOiwQ6QaO7Td0zV76UFJVhqLl4Vl3KL1We6q6wR9" crossorigin="anonymous"></script>
</head>
<body>

@RenderBody()


@RenderSection("Scripts", required: false)
</body>
</html>

Is there a reason they are in the head. Could you not have your main file sitejs at bottom of body before your Scripts section and load site2.js (or any specific page scripts) in this section. For above situation if site.js comes before site2.js and you move sendAlert() out of the document.ready it should work fine when called from site2.js https://stackoverflow.com/questions/25962958/calling-a-javascript-function-in-another-js-file — ShufflerShark, Apr 16 '19 at 09:12
Possible duplicate of [Calling a javascript function in another js file](https://stackoverflow.com/questions/25962958/calling-a-javascript-function-in-another-js-file) — ShufflerShark, Apr 16 '19 at 09:20

score 0 · Answer 1 · answered Apr 16 '19 at 09:02

I think that you can do this:

$(function() {

    var script = document.createElement("script");
    script.setAttribute("type", "text/javascript");
    script.setAttribute("src", "../site2.js");
    document.getElementsByTagName("head")[0].appendChild(script);

});

Cheers - Vinh

Calling a JS function from a second file using ASP.NET

1 Answers1