[jQuery] Do Firefox and IE handle 'scope' differently?
Hi,
Apologies if I'm doing something silly here, but I'm having great
difficulty tracking this down...
If I run the following page in FF, everything is good in the world.
However, if I run it through IE7, my global variable (gData) looses
its contents.
Could some kind soul let me know if this is Firefox being kind and
'fixing' my bad code, or is there (another) bug in IE?
I'm wondering if it's something to do with me calling a function (via
a callback method) from within the constructor, which then tries to
access the item being constructed via it's 'global' pointer. But if
this is invalid, should it not also fail in Firefox?
The code below is self contained except it looks for a file called
'scope-test-data.js' containing a JSON string. I'm just using the
following for test...
{"testObjects":[{"Key1":"val1"}, {"Key2":"val2"}, {"Key3":"val3"}]}
When the page is loaded in firefox, I get an alert telling me the
global data object has 3 items, which is as expected. However, in
IE7, the global data reference is null!
The page code is...
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="scripts/jquery/jquery.js"
type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var gData = null; // Populated once document is 'ready'
// Use jQuery 'document.ready' selector to define the function to call
when
// the page is ready.
$(pageSetup);
//////////////////////////////////////////////////////////////////////////////
// The main entry function called by the jQuery 'document.ready'
selector,
// creates a new global data object
//////////////////////////////////////////////////////////////////////////////
function pageSetup() {
gData = new TestCollection("scope-test-data.js");
} // End pageSetup() function
//////////////////////////////////////////////////////////////////////////////
// Constructor for an instance of a test class
//////////////////////////////////////////////////////////////////////////////
function TestCollection(sourceURL) {
// Store parameters for later use
this.sourceURL = sourceURL;
// Create an internal array to hold our retrieved data
this.retrievedObjects = new Array();
// Need to retain the 'this' scope
var instance = this;
var ajaxXmlhttp = null;
// If browser supports native XMLHTTPRequest...
if(window.XMLHttpRequest && !(window.ActiveXObject)) {
// ...try to construct one
try {
ajaxXmlhttp = new XMLHttpRequest();
}
// If it fails, ensure we set to null
catch(e) {
ajaxXmlhttp = null;
}
}
// Else, see if we have the ActiveObject version...
else if(window.ActiveXObject) {
// ...and try to create one
try {
ajaxXmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e) {
try {
ajaxXmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
ajaxXmlhttp = null;
}
}
}
// If we have a request object...
if(ajaxXmlhttp) {
// ...define the handler function
ajaxXmlhttp.onreadystatechange = function() {
if(ajaxXmlhttp.readyState == '4') {
var response = ajaxXmlhttp.responseText;
// Remove any carage return and line feeds (seems to cause eval a
problem)
response = response.replace(/\r\n/g, '');
// feed response through eval to create an object from the json
data
response = eval('(' + response + ')');
// Call the json parse method to populate our internal list
instance.parseJson(response);
} //End if(state == 4)
}; // End onreadystatechange callback method
// open the request
ajaxXmlhttp.open("GET", sourceURL, true);
// and initiate it
ajaxXmlhttp.send(null);
}
} // End constructor
//////////////////////////////////////////////////////////////////////////////
// Take supplied JSON object and use to populate our internal data
structure
// Then call the buildOutput function
//////////////////////////////////////////////////////////////////////////////
TestCollection.prototype.parseJson = function(json) {
// Go through each retrieved object and store it in our list.
for(var index = 0; index < json.testObjects.length; ++index) {
this.retrievedObjects.push(new Object()); // temp code for test
purposes
}
// now that we have all our data, build our output
buildOutput();
} // End parseJson method
//////////////////////////////////////////////////////////////////////////////
// Builds a table using the global data object
//////////////////////////////////////////////////////////////////////////////
function buildOutput() {
if(gData) {
alert("gData has " + gData.retrievedObjects.length + " items.");
}
else {
alert("gData is null. Why!");
}
} // End buildOutput method
</script>
</head>
<body>
some content
</body>
</html>
Thanks in advance for any insightful comment.
Regards,
Glenn