Load data from external files

[jeet_sen]

Hi,
I have a file containing variables defined in javascript syntax, like,
var a = 15;
var list = [ 'a','b','c'];
..
..
I want to load this external file dynamically and read in the data.
I can successfuly read this file content if I include the file
statically in the head section in my page. But when I am trying to
include the file using DHTML, i cannot source it.
Please suggest.

Regards,
Suvajit

 

[Randy Webb]

jeet_sen said the following on 3/7/2006 10:58 PM:

Hi,
I have a file containing variables defined in javascript syntax, like,
var a = 15;
var list = [ 'a','b','c'];
..
..
I want to load this external file dynamically and read in the data.
I can successfuly read this file content if I include the file
statically in the head section in my page. But when I am trying to
include the file using DHTML, i cannot source it.
Please suggest.

Show some source code on how you are loading it and attempting to access it.

 

[jeet_sen]

I am loading the data with the following function:
function loadScript (url, id, callback) {
var scriptElement = document.createElement('script');
scriptElement.type = 'text/javascript';
scriptElement.src = url;
scriptElement.id = id;
if (typeof scriptElement.addEventListener != 'undefined') {
scriptElement.addEventListener(
'load',
function (evt) { callback(); },
false
);
}
else if (typeof scriptElement.attachEvent != 'undefined') {
scriptElement.attachEvent(
'onreadystatechange',
function () {
if (scriptElement.readyState == 'complete') {
callback();
}
}
);
}
document.getElementsByTagName('head')[0].appendChild(scriptElement);

}


Function call:
// Load data
file2Load = 'test.js';
loadScript(file2Load,name,function () { alert(file2Load+"
loaded!!");} );

test.js looks like this:

var TABLE_ITEMS = {
'name' : 'GS60H',
'level' : 'Library',
'child' : {
'gs60hcustom' : {
'qualis'
: {'status' : 'PASSED' },
'startAttributeCheck'
: {'status' : 'WAIVED' },
'availabilityCheck'
: {'status' : 'PASSED' },
'libAttributesCheck'
: {'status' : 'PASSED' },

'checkViewConsistency' : {'status' : 'PASSED' },
'simModelsCompile'
: {'status' : 'FAILED' },
},
},
'total' : 500,
'failed' : 20,
'waive' : 5
};


* Used callback to ensure that my script loading function is working
properly.
Found that the passed function has been called and new script tag
has been created successfully.
* But I cannot access the object TABLE_ITEMS defined in test.js. What
is the scope of the object loaded through a script dynamically?

 

[RobG]

I am loading the data with the following function:

The function is fine, your data file has syntax errors.

function loadScript (url, id, callback) {
var scriptElement = document.createElement('script');
scriptElement.type = 'text/javascript';
scriptElement.src = url;
scriptElement.id = id;
if (typeof scriptElement.addEventListener != 'undefined') {
scriptElement.addEventListener(
'load',
function (evt) { callback(); },
false
);
}
else if (typeof scriptElement.attachEvent != 'undefined') {
scriptElement.attachEvent(
'onreadystatechange',
function () {
if (scriptElement.readyState == 'complete') {
callback();
}
}
);
}
document.getElementsByTagName('head')[0].appendChild(scriptElement);

}


Function call:
// Load data
file2Load = 'test.js';
loadScript(file2Load,name,function () { alert(file2Load+"
loaded!!");} );

There is a syntax error here from auto-wrapping. When posting code,
manually wrap at about 70 characters so it can be quoted a couple of
times without wrapping.

var file2Load = 'test.js';
loadScript(file2Load,name,function () {
alert(file2Load + " loaded!!");

// Test availability of TABLE_ITEMS
alert(TABLE_ITEMS.name);
} );




But that's not the really problem...

test.js looks like this:

var TABLE_ITEMS = {
'name' : 'GS60H',
'level' : 'Library',
'child' : {
'gs60hcustom' : {
'qualis'
: {'status' : 'PASSED' },
'startAttributeCheck'
: {'status' : 'WAIVED' },
'availabilityCheck'
: {'status' : 'PASSED' },
'libAttributesCheck'
: {'status' : 'PASSED' },

--------------------------^^^

the extra comma here causes problems.

'checkViewConsistency' : {'status' : 'PASSED' },
'simModelsCompile'
: {'status' : 'FAILED' },
},

---------------------------------------------------^^^

As does this one. Formatting for posting would have helped. Firefox
was happy with it (surprisingly), only IE barfed for me.

},
'total' : 500,
'failed' : 20,
'waive' : 5
};

It's probably better to use machine-generation of such code, it's very
fussy doing it manually. Try building a form that generates the code in
a text area for copy/paste (for your local use only of course).

Try this version:


var TABLE_ITEMS = {
'name' : 'GS60H',
'level' : 'Library',
'child' : {
'gs60hcustom' : {
'qualis' : {'status' : 'PASSED' },
'startAttributeCheck' : {'status' : 'WAIVED' },
'availabilityCheck' : {'status' : 'PASSED' },
'libAttributesCheck' : {'status' : 'PASSED' },
'checkViewConsistency': {'status' : 'PASSED' },
'simModelsCompile' : {'status' : 'FAILED' }
}
},
'total' : 500,
'failed' : 20,
'waive' : 5
};

 

[jeet_sen]

Hi Rob,
Thanks a lot for your effort and time. I will surely try it out.
My data files will be machine generated. I generated the file manually
just to implement my plan.
Lately I have worked on an alternative plan and have implemented it.
Instead of the object literal form I dumped my data in XML form and it
is working fine.
Please suggest what will be a better option.
Regards,
Suvajit

 

[RobG]

Hi Rob,
Thanks a lot for your effort and time. I will surely try it out.
My data files will be machine generated. I generated the file manually
just to implement my plan.
Lately I have worked on an alternative plan and have implemented it.
Instead of the object literal form I dumped my data in XML form and it
is working fine.
Please suggest what will be a better option.

I can't tell you which is better - have a look at JSON:

<URL:http://www.json.org/>

 

[Thomas 'PointedEars' Lahn]

--------------------------^^^

the extra comma here causes problems.


---------------------------------------------------^^^

As does this one. Formatting for posting would have helped. Firefox
was happy with it (surprisingly), only IE barfed for me.

It is not surprising to me, because JavaScript is known
to work as specified in ECMAScript here; JScript does not.


PointedEars