How to load external js files with html

Question

I have use following method to load html content to my index,

$("#home-btn").click(function() {
    $("#content").load("views/plant.html");   
});

It's loading the html contents correctly, but i have used some external js files that related to the html's and link the related external js files to my index html. Issue is, missing the effects form external js in the html contents that i have load. How can I fix it?

do you have the js file included in a <script> tag in either plant.html or index.html? — rebecca
– rebecca, Commented Oct 13, 2017 at 9:19
use lazyload method, that will be good if you are trying to load JS on click or any other event, it avoid load on first page loading time. — Sinto
– Sinto, Commented Oct 13, 2017 at 9:21
have you tried adding it in the plant.html? i'm assuming the effects don't take place because the content isn't there yet. do you get any errors in your console? — rebecca
– rebecca, Commented Oct 13, 2017 at 9:22
No any errors. I have not tried it, because I have lots of files to load like that. Is there any way to load external js with html load — Udara Herath
– Udara Herath, Commented Oct 13, 2017 at 9:26

Bharathi · Accepted Answer · 2017-10-13 09:20:50Z

1

Refer your external js file with your html file as you see in the below code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="Scripts/externalFile.js"></script>       
</head>
<body>
</body>
</html>

answered Oct 13, 2017 at 9:20

Bharathi

1,3383 gold badges14 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sinto · Accepted Answer · 2017-10-13 10:48:52Z

1

Load jQuery

$("#home-btn").one( "click", function() {
    console.log("You'll only see this once!");

    sendMyAjax('http://yoursite.com/script1.js');
    sendMyAjax('http://yoursite.com/script2.js');
    sendMyAjax('http://yoursite.com/script3.js');
});

function sendMyAjax(URL_address) {
    $.ajax({
        url: URL_address,
        dataType: 'script',
        cache: true, // or get new, fresh copy on every page load
        success: function() {
            // Callback
        }
    }
}

By this method the extra script will only be loaded after your click on specified location. By this way the load required to load extra JS on time of first page load can be avoided.

edited Oct 13, 2017 at 10:48

answered Oct 13, 2017 at 10:23

Sinto

3,97712 gold badges41 silver badges74 bronze badges

3 Comments

Udara Herath Over a year ago

This is working. Can i send more scripts with this method?

Sinto Over a year ago

yes, but i think you have use ajax section again. If you have time please check a plugin like lazy load, which support loading/setting multiple JS & loads those by avoid load as your requirement. I do not have those codes with me.

Udara Herath Over a year ago

Thank you very much

Collectives™ on Stack Overflow

How to load external js files with html

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related