How to load multiple javascript files inside HTML page

Question

I have many js files (say divided into set1 and set2), which are reused in multiple HTML and aspx pages. Using VS 2010.

I tried in head of the page1.html

< script type="text/javascript" src="/Scripts/set1.js">
< /script>

set1.js has:

/// < reference path="test11.js" />
/// < reference path="test12.js" />

All js files are in the Scripts folder of the VS solution.

Will the page1.html load both test11.js and test12.js . It seems to be not happening and i get function (javascript function which i use on button events etc) undefined error while page loads.

What is the correct way to do it ? and what is the reference tag for ?

@marcel because i get exception of js function undefined on page load. — Munish Goyal
– Munish Goyal, Commented Jun 16, 2011 at 11:50

GeertvdC · Accepted Answer · 2011-06-16 11:41:57Z

2

you have to include the scripts by using the <script> tag in the html <head>

<script type="text/javascript" src="test11.js"></script>
<script type="text/javascript" src="test12.js"></script>

if you want to dynamically do this using javascript and jquery you could use the following example presuming you have an aray of javascript files you want to include:

example1 using jquery and javascript:

for (var i = 0; i < scripts.length; i++)
{ 
    $head.append("<script src=\"" + scripts[i] + "\" type=\"text/javascript\"></script>")
};

example2: using only javascript without jquery:

for (var i = 0; i < scripts.length; i++)
{ 
    var scriptElem=document.createElement('script')
    scriptElem.setAttribute("type","text/javascript")
    scriptElem.setAttribute("src", scripts[i])
    document.getElementsByTagName("head")[0].appendChild(scriptElem)
};

edited Jun 16, 2011 at 11:41

answered Jun 16, 2011 at 11:36

GeertvdC

2,9562 gold badges23 silver badges26 bronze badges

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

Comments

DanielB · Accepted Answer · 2011-06-16 11:34:50Z

1

The reference tag is only for Intellisense completion (it's a comment, so JS ignores these lines).

You have to use the <script> tag for each script file you want to include.

answered Jun 16, 2011 at 11:34

DanielB

20.3k2 gold badges48 silver badges52 bronze badges

Comments

Nathan · Accepted Answer · 2011-06-16 11:36:10Z

1

Put all your script references in the master-page head section - much easier to manage

<head>
  <script type="text/javascript" src="x1.js"></script>
  <script type="text/javascript" src="x2.js"></script>
  ...
</head>

answered Jun 16, 2011 at 11:36

Nathan

6,2244 gold badges38 silver badges66 bronze badges

2 Comments

Munish Goyal Over a year ago

So if i am using same set of scripts set1 in 5-6 pages, then i will have to change in all 5-6 pages whenever i need to add or remove a js file. isnt there an indirection solution so that i make change only in 1 file (like set1.js) for easier maintenance. If there isnt any solution then i will go ahead with waht you siggested.

Nathan Over a year ago

That's what the masterpage is for - create a masterpage and make all your aspx pages use the masterpage, then you have a single point of change. Google asp.net masterpage for examples of how to do this.

Collectives™ on Stack Overflow

How to load multiple javascript files inside HTML page

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related