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: .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 pletely flummoxed by this.

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./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 pletely flummoxed by this.

• javascript
• include
• src

• Try viewing the site in Chrome and the view the source of the page. Chrome will make the src of the script a link, so that you can click on it. See if it loads your script. If not then it's not pointing to the correct location. Alternatively, just put popup.js at the end of your URL and see if it loads. – Marshall Commented Mar 13, 2012 at 18:25
• First check in firebug if your "popup.js" script is at least loaded. – Just_Mad Commented Mar 13, 2012 at 18:26
• +1 for use of the word, "flummoxed". Please see my answer for the solution to your issue. – Dmitriy Khaykin Commented Mar 13, 2012 at 19:57

4 Answers 4

The script needs to be parsed before it can be referenced. This is a classic case of a race condition. Make sure the script is in the <head> if you're going to reference it in the DOM like that. Also make sure your pathing is correct in your src="/path/to/popup.js"

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.

Try using:

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

or if that doesn't work:

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

It is probably not finding the path, but using Firebug or Chrome's console should be able to tell you.

I had a different cause, but same symptoms. Essentially I didn't make the connect that a script file on a server, needs an addition to the routing table to retrieve it. A bit dumb in hindsight, but I may save someone else some time.

FWIW, I added (using node.js);

// script routes
app.get('/scripts/:script',                  script_server.serve);

and in script_server.js

exports.serve = function(req, res){
  res.sendfile(req.param('script'));
};