Reputation: 749
Not Loading External JS File
There is no real reason that this code shouldn't work, as far as I can tell. I have a HTML file and an external .js file. Here is the statement that I am using inside of the html to load the .js file:
<script type="text/javascript" src="family.js"></script>
The name of the file is correct, and it is in the same directory. I'll post the full code of the html page below, just in case something is off with something else.
Is there anything that I am missing? The .js file should make a sliding menu, however it is simply not loading. I have an alert inserted in the .js file that should alert me when it's working, although it doesn't show up.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW6 -->
<head>
<title>The Jones Family</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="family.css" type="text/css" />
<script type="text/javascript" src="family.js"></script>
<script language="JavaScript" type="text/javascript">
var d=new Date();
var monthname=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
//Ensure correct for language. English is "January 1, 2004"
var TODAY = monthname[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
alert ("Inside script is working");
</script>
</head>
<body >
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="head">
<td width="382" colspan="3" rowspan="2"><img src="camera.jpg" alt="camera" border="0" /></td>
<td width="378" height="50" colspan="3" id="logo" valign="bottom" align="center" nowrap="nowrap">The Jones Family Website</td>
<td width="100%"> </td>
</tr>
<tr class="head">
<td height="51" colspan="3" id="tagline" valign="top" align="center">Photo Gallery</td>
<td width="100%"> </td>
</tr>
<tr>
<td colspan="7" class="separator" ><div class="myHr"><hr /></div></td>
</tr>
<tr class="separator">
<td colspan="7" id="dateformat" height="20"> <script language="JavaScript" type="text/javascript">
document.write(TODAY); </script> </td>
</tr>
<tr>
<td colspan="7" class="separator" ><div class="myHr"><hr /></div></td>
</tr>
<tr>
<td width="200" height="450" valign="top" class="nav" >
<table class="nav" border="0" cellspacing="0" cellpadding="0" width="40" id="navigation">
<tr>
<td > <br />
<br /></td>
</tr>
<tr>
<td ><div class="navG" id="gallery1" style="position: absolute; top: 180px; left: -150px; " >
<table width="184" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150"><a href="#">Disney</a><br />
<a href="#">SeaWorld</a><br />
<a href="#">Bush Garden</a><br />
<a href="#">Universal Studios</a><br />
</td>
<td><img src="gallery1.jpg" alt="gallery 1" class="nav1" /></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td ><div class="navG" id="gallery2" style="position: absolute; top: 285px; left: -150px; " >
<table width="184" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150"><a href="#">Sweet 16</a><br />
<a href="#">Summer Camp</a><br />
<a href="#">Holiday</a><br />
<a href="#">Ski Trip</a><br />
</td>
<td><img src="gallery2.jpg" alt="gallery 2" class="nav1" /></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td ><div class="navG" id="gallery3" style="position: absolute; top: 390px; left: -150px; " >
<table width="184" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150"><a href="#">Mom's Birthday (2011)</a><br />
<a href="#">Dad's Birthday (2011)</a><br />
<a href="#">Bobby's Birthday</a><br />
<a href="#">Jenny's</a><br />
</td>
<td><img src="gallery3.jpg" alt="gallery 3" class="nav1" /></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td ><div class="navG" id="gallery4" style="position: absolute; top: 495px; left: -150px; " >
<table width="184" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150"><a href="#">Skatepark</a><br />
<a href="#">Wildlife</a><br />
<a href="#">Beach</a><br />
<a href="#">Hawaii</a><br />
</td>
<td><img src="gallery4.jpg" alt="gallery 4" class="nav1" /></td>
</tr>
</table>
</div></td>
</tr>
</table>
<br />
<br />
<br />
<br /> </td>
<td width="50"></td>
<td width="305" colspan="2" valign="top"><br />
<br />
<br />
<table border="0" cellspacing="0" cellpadding="0" width="305">
<tr>
<td class="pageName">Family Photos</td>
</tr>
<tr>
<td class="bodyText"><p>From here you can see family Photos taken by our various amateur photographers!</p>
<p>We hope you enjoy the photos as much as we do!</p>
<p align="center"><img src="sayCheese.jpg" alt="Say Cheese" /></p></td>
</tr>
</table>
<br />
<br /> </td>
<td width="50"></td>
<td width="190" valign="top"><br />
<br />
<table border="0" cellspacing="0" cellpadding="0" width="190" id="leftcol">
<tr>
<td width="10"></td>
<td width="170" class="smallText"><br />
<p><span class="subHeader">Photog #1</span><br />
Mary Sue - Mother, she prefers her Canon camera. She still uses film, but has the photos put onto digital cd when developed. </p>
<p><span class="subHeader">Photog #2</span><br />
Bobby - Hip son, he prefers his HP kid digital camera. Not that old, but still takes interesting pictures.</p>
<p><span class="subHeader">Photog #3</span><br />
Jenny - Cool Teen, she has a Sony digital video camera. She takes movies and still photos. Just don't expect her to smile too much.</p>
<br />
<br /> </td>
<td width="10"> </td>
</tr>
</table> </td>
<td width="100%"> </td>
</tr>
<tr>
<td width="165"> </td>
<td width="50"> </td>
<td width="167"> </td>
<td width="138"> </td>
<td width="50"> </td>
<td width="190"> </td>
<td width="100%"> </td>
</tr>
</table>
</body>
</html>
Upvotes: 1
Views: 29475
Answers (5)
Reputation: 31
If you dont have any errors like the answer above and are using a web host.... 1. login to control panel and check if file actually exist there.
I ran into the same problem, i was using ftp(winSCP) to upload my files when i made changes and even changed file names i ran into the same problem but when i went to the control panel(file manager) all the changes i was making through the winSCP were not being reflected then i uploaded everything through the control panel it all started working fine.
Upvotes: 0
Reputation: 145
I had a problem with the same description as the author of the question.
But, in my case, the js file was not being re-read from the disk. Initially, my js file was empty as I began testing the HTML structure. Later when I added code to the js file, the browser window, which had been open, did not re-read the js file, even after "refreshing" the browser.
The js file was there, it was in the same directory, but the content of the file was memory cached in the browser. I saw a message to this effect somewhere in the Google debugger, but I am unable to find that message again. The message stated the HTML file was disk cached and the js file was memory cached.
The HTML file was refreshed when I clicked the browser's refresh button, but the js file was not getting refreshed and was still showing empty in the "sources" tab from the initial running of the page before js content was added.
To fix, I closed the browser window, opened a new browser window, and everything started working correctly. The new window re-read the js script from disk.
Upvotes: 3
Reputation: 3167
the problem is not the MIME type, but it's in the JS script (if it's the one at 'http://orca.st.usm.edu/~tbonnet2/440/p5/family.js')
A closing parentheses is missing, look into closeMenu():
function closeMenu() {
/* get the current menu id */
var ID = this.id + "List"
/* determine active menu */
activeMenu = document.getElementById(ID);
if (activeMenu) { // <------ THIS CONDITIONAL BLOCK ISN'T CLOSED!
activeMenu.style.display = "none";
activeMenu = null;
/* run the moveItemLeft function by setting a time interval */
timeID = setInterval("moveItemLeft()", 1);
}
Upvotes: 5
Reputation: 104020
Note that your server returns a different MIME-type than specified in your HTML source:
<script type="text/javascript" src="family.js"></script>
$ HEAD http://orca.st.usm.edu/~tbonnet2/440/p5/family.js
200 OK
Connection: close
Date: Thu, 23 Feb 2012 02:22:59 GMT
Accept-Ranges: bytes
ETag: "1320142-9f5-4b9979ec8c280"
Server: Apache/2.2.3 (Red Hat)
Content-Length: 2549
Content-Type: application/x-javascript # <-- see here
Last-Modified: Thu, 23 Feb 2012 01:32:42 GMT
Client-Date: Thu, 23 Feb 2012 02:22:59 GMT
Client-Peer: 131.95.35.200:80
Client-Response-Num: 1
Upvotes: 0
Reputation: 3167
Check with, for example, Firefox's console if there are errors regarding the loading of that js file (and post them). Maybe, the file is loaded but it contains errors that don't let you see the alert
Upvotes: 0
Related Questions
- HTML is not reading external Javascript file
- External javascript file in html not working
- Html file not reading external js file
- not loading external js script
- External Js file not loading
- External JS not loading in my html file?
- External file script is not loading
- HTML not calling external JS file
- Unable to use an external javascript .js file
- external java script file not working