script "src" tag issues

Question

I have a script embedded in a page, which is as follows:

<script type="text/javascript">

function fireNlPopup()
{
    setOpacity(0);
    centre();
    document.getElementById("NlPopup").style.display = "block";
    fadeInNlPopup();
}

//Other functions here

</script>

this makes the following appear as a popup in-window:

<div id='NlPopup' name='NlPopup' class='nl'>
<table width='380' cellpadding='0' cellspacing='0' border='0'>
<tr>
<td><img height='23' width='356' src='images/x11_title.gif'></td>
<td><a href='javascript:fadeOutNlPopup();'><img height='23' width='24' src='images/x11_close.gif' border='0'></a></td>
</tr>
<tr><td colspan='2' style='background: url("images/x11_body.gif") no-repeat top left; width: 380px; height: 277px;'>
Your next lecture is X, with Y, at Z.
</td></tr>
</table>
</div>

and finally, this is all called by a button:

<button type="button" style="button" onClick="fireNlPopup()">Next Lecture</button>

The problem is when I try and put the script is a different file. I have a file, called popup.js, with the exact same code (since it works when embedded in my php file, i assumed if i copied it rote into a js file and called that, it would work.

When i call the js file, I use:

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

and then all the content between the script tags go into popup.js. However, despite the code working fine when it's embedded, the second I take it out and put it in its own file, it doesn't work. I've double and triple checked, my code works fine, is syntaxed correctly, and that's why I left it out the code snippet. for some reason it just stops working. Am I calling the file incorrectly? It is on my server, I have checked that too =P

I'm probably being really stupid, but any help would be really useful. I've been stuck on this for ages.

Thanks =)

EDIT: for those who want a look, page is live here: http://oliverlea.com/3yp/tt.php

Also, using Chrome to view source, the file does load as a link.

Thanks for the help =)

EDIT 2:

First, yep the script tag is in the head of my file.

Second: Ok, so regardless of whether I use src="popup.js" "/popup.js" or "./popup.js" I get nothing. The url always loads in Chrome's source viewer, and even by changing the permissions of the file to 0755, it still makes no difference.

I am completely flummoxed by this.

Answer 1

This is an encoding issue with the popup.js file. Please see below for my analysis. Some browsers "fix" this for you and others do not. The solution is to save popup.js file in standard encoding, on Windows machine try saving in Notepad.

EDIT: Added summary (above). Complete analysis of your problem is below:

Your page works in IE9, but not in Chrome or Firefox. Further, I copied the page and your CSS and JS (but not images) into a local project and it works for me there as well (even in chrome and Firefox).

I then loaded your live page into FireFox and opened FireBug, and when I clicked "Next Lecture", the console showed me that FireNlPopup is undefined.

On further review, I went to view source in FireFox on your live page, and clicked "popup.js" The result looked like this:

It seems like you are using a text editor of some sort to create your popup.js file which is encoding in a weird format; use standard Notepad or Notepad++, (i.e., not Wordpad) or use Eclipse or Visual Studio to save the popup.js file, and you should be good.