Javascript variable not available in external file
This is something with javascript; or is it something else I am doing wrong.
file1.js
var collection = new Object();
collection.foo = new Array(1, 2, 3);
2.js file
var someClass = new Class({
bar : function() {
alert(collection.foo.length);
}
});
index.html
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript">
var x = new someClass();
x.bar(); //cannot find collection
</script>
So I tried a different approach:
file1.js
collection.foo = new Array(1, 2, 3);
2.js file
var someClass = new Class({
bar : function() {
alert(collection.foo.length);
}
});
index.html
<script type="text/javascript">
var collection = new Object();
</script>
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript">
var x = new someClass();
x.bar(); //cannot find collection.foo
</script>
I use mooTools (where the class object comes from) if you think that's important.
Update: I've simplified it for posting the example, but x.bar () is part of the click event for another method. But after some alert () testing I found that file1 is not actually being executed. It's actually an .axd file being sent with text / javascript contenttype, so I'm not sure why - I'll have to investigate tomorrow.
And yes, the tags will be at the bottom. file1 is an annoying large javascript file, so it gets detached - the goal is to cache as much on the client as humanly possible. It is an .axd file because it is generated from the database (Ref data) and I am setting expires, compression, contenttype and cachability values explicitly.
Update: . After more attempts, I realized that there was an error in the generated data that firebug was not catching; and it was just a bug, not some deep technical problem. As such; closing.
source to share
- your file source1 wrapped in (somewhat standard pattern)
(function() {
})();
which does what it intends in this case to make the variables local?
EDIT: Does add space between <script> and </script> Help? I had some problems where empty tags were ignored, but I'm not sure if this applies in this case.
source to share
This could be the order in which the files are executed. The browser will launch the files in the order in which they are loaded, not necessarily in the order in which they were included. An easy way to check if this is the case is to add a debug line to each file.
file1.js
alert("Loading File 1");
var collection = new Object();
collection.foo = new Array(1, 2, 3);
file2.js
alert("Loading File 2");
// ... your code.
If it shows file 2 before file 1 then your problem is occurring. I'm not sure about a reliable method to avoid this, but I use a script to package all my javascript into one big file - that way you know exactly the order in which everything will be loaded no matter what.
source to share
JS files block other downloads and cause download delays for users. For this reason, it's best to stick to script tags at the bottom of the page whenever you can. See here under "Scripts Below" or here .
What is probably happening is that the JS files are not completely ready by the time the JS on the page is ready to be executed. You will need to think about these parameters.
Is there a reason why these files cannot be combined? Can you wrap the inline script (example 1 - index.HTML) in funciton and bind this function to the onload () event?
source to share