Create separate js file for inclusion

Question

I have a html file in which currently resides all my javascript code. I want to make a separate .js file, put all the javascript code in that and include that in my .html file. I tried doing it, and also removed the opening/closing tags in the .js file and put this line in .html file -

<script type='text/javascript' src="myfile.js"></script>

However, this is not working. Any ideas on what's wrong? Thanks in advance.

---------------------EDIT-----------------------------

<html>  

<title>Process Details</title>  

<head>  
<script type="text/javascript" src="https://www.google.com/jsapi"></script>  
<script type="text/javascript" src="myfile.js">  
</script>  

<style type="text/css">  
  body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }  
  ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }  
  ul#tabs li { display: inline; }  
  ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }  
  ul#tabs li a:hover { background-color: #f1f0ee; }  
  ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }  
  div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; }  
  div.tabContent.hide { display: none; }  
  .heading { font-size:110%; font-family:'Century Schoolbook'; color: maroon; }  
  .data { font-size:110%; font-family:'Century Schoolbook'; color:black; }  
</style>  

</head>  

<body onload="init()">
<center>
<font face='Calibri' size='3' color='Blue'>PID : </font>
<select id='list' onchange="refreshData()">
</select>
<form>
<input type="button" id="Refresh" onclick="refreshPage()" value="Refresh Data"/>
</form>
</center>

<ul id="tabs">
<li><a href="#memory">Memory</a></li>
<li><a href="#thread">Thread</a></li>
<li><a href="#summary">Summary</a></li>
</ul>
<div class="tabContent" id="memory">
<table id="graphtab" align="center">

<tr>
<td id="heap" align="center"></td>
<td id="nonheap" align="center"></td>
</tr>
<tr>
<td id="resident" align="center"></td>
<td id="pagefaults" align="center"></td>
</tr>

</table>
</div>
<div class="tabContent" id="thread">
<table id="threadtab" align="center">

<tr>
<td id="cpuusage" align="center"></td>
<td id="count" align="center"></td>
</tr>
<tr>
<td id="threadlist" align="center"></td>
<td id="threaddets" align="center"></td>
</tr>

</table>
</div>
<div class="tabContent" id="summary">
</div>
<a href="client.html">Home Page</a>
</body>

</html>

There is nothing wrong with the code you have shared with us. — Quentin, Jun 13 '12 at 08:25
Still its not working. Nothing happens when the page loads up. — Cygnus, Jun 13 '12 at 08:29
Whatever the problem is, we can't divine it from what you have shared with us. — Quentin, Jun 13 '12 at 08:30
I assume your js file is named myfile.js? I assume your myfile.js is in the same folder as your html file? Can you share the part of the html where you have this script tag. Are you using jquery or some other external lib? If you put an alert('hello') in top of your myfile.js does it show the alert? — rene, Jun 13 '12 at 08:30
Yes, its in the same folder. Here's the html code fragment- ' Process Details ` — Cygnus, Jun 13 '12 at 08:32
`google.com/jsapi` would refer to `http://www.yourdomain.com/google.com/jsapi`. If that is your actual URL, remember to use `http://` - *Edit*: Nevermind, you edited your post. Does your javascript console say anything? Do you know if you're getting a 404? — h2ooooooo, Jun 13 '12 at 08:33
what are you hosting on? local dev environment using Apache, IIS, etc — Gerard Sexton, Jun 13 '12 at 08:35
@GerardSexton : Yes, its on the local environment using Apache. — Cygnus, Jun 13 '12 at 08:36
If you try to access the file directly (`http://localhost/jshandler.js`) do you see the content of the javascript file? — h2ooooooo, Jun 13 '12 at 08:37
Can you access the file in your browser from the URL `http:////myfile.js`? — August Karlstrom, Jun 13 '12 at 08:37
If you have the HTML file in the same folder as the JS, you can read it directly and you have no `` html tag, then you should definitely see it loading. If it's in the root of your server, try with `/jshandler.js` or specify a full path to it, to see whether that makes a difference. — h2ooooooo, Jun 13 '12 at 08:41
@h2ooooooo : Yes, same folder-can read directly-no html tag. Yet not working :/ — Cygnus, Jun 13 '12 at 08:44
please indulge us and post the whole html in an edit section on the same original question. — Gerard Sexton, Jun 13 '12 at 08:51
@Cygnus: have you try using firebug to check if your code get running or not? — Hoàng Long, Jun 13 '12 at 09:20
by the way, creating a jsFiddle version might not be a bad idea — Hoàng Long, Jun 13 '12 at 09:21
I'm pretty sure, and tell me if I'm wrong, that the onload on the body specifies when the page is loaded and NOT the external javascript libraries. Therefore your init function is most likely not defined yet, and therefore it stops running the script (or doesn't run it at all if you expect it to run the init). For it to run when the page is loaded, you could do this http://stackoverflow.com/questions/1235985/attach-a-body-onload-event-with-js or use jQuery (but that might be overkill). — h2ooooooo, Jun 13 '12 at 09:26
This would also explain why it works when you include it in the header, because then the script has already been parsed once it tries to run the `init()` function. — h2ooooooo, Jun 13 '12 at 09:28
Thanks a lot. You're right regarding the external libraries thing. Looks like if i'm not using anything else, i have to put it all in the same file !!! — Cygnus, Jun 13 '12 at 09:31
@h2ooooooo: I was thinking the same so I made a page to test that. In the external js I added the entire jQuery code + the function definition(init) so that it will be surely be parsed after the body onload part. But it worked, that is what is weird. — Răzvan Flavius Panda, Jun 13 '12 at 09:33
@RăzvanPanda That *is* weird. Did you have any images on your test page or anything that might cause the body onload event to fire *after* the other stuff had been loaded? If you try with a blank HTML page with some text on, is it the same? It might also be a difference between browsers (even though it is wrong code), testing whether the `onload` callback function exists yet, and if it doesn't, wait until it does. OP, what browser have you tested this with? — h2ooooooo, Jun 13 '12 at 09:38
@h2ooooooo: I tested the code in Chrome, Firefox and IE9 and it worked in all. This is the HTML: http://pastebin.com/UEafWLb4 and the content of myfile.js is the entire jQuery library followed by the definition of `load()` http://pastebin.com/7F0gCdqL — Răzvan Flavius Panda, Jun 13 '12 at 09:42

score 1 · Answer 1 · answered Jun 13 '12 at 09:49

1

Use http protocol instead of https. Using https throws a GET exception in Chrome but not Firefox.

And your <title> should be inside the <head> tag.

answered Jun 13 '12 at 09:49

ShouravBR

685
7
10

Create separate js file for inclusion

1 Answers1