cjl wrote:
Hey all:
I've searched the newsgroup, and googled, but I'm stuck. I want to be
able to 'dynamically' add a .js file to a web page after the page has
loaded, based on user interaction.
For example, the user make a choice by clicking on an item called
20050928, and as a result a file named "20050928/case.js" is
"included", and the data contained within is available.
The "data" files, in this example 20050928.js, contain several variable
assignments.
Can anyone point me in the right direction, or should I rethink my
webapp design?
You can load script files by adding a script element and assigning an
appropriate value to the src attribute.
Ensure that the file is loaded before you try to use it. You can create
a suitable pause by having a user action select the file to load, then
another action to use the data. The pause between user actions gives
the browser time to load the file.
Another way to pause for the file to load is make the call to load the
file, then use setTimeout() to continue the script using a sufficient
lag to allow the script to load.
Neither are particularly robust since you don't know how long the file
will take to load.
Another (better?) option is to use XML and load the file using
document.implementation with Mozilla/Firefox or "Msxml.DOMDocument" with
IE. Then parse the file or use JSON or similar to convert the file to
objects that you can use.
It may be more work than you're prepared to do, and support is patchy
across browsers. Why not just load the data as a .js file when the page
loads? Even 20k of data would likely be OK provided you wait for the
page load to do stuff.
Here's a bit of sample code that works in Firefox and IE (but I make no
claims at all about its robustness) using a trivial XML file:
[XML file : data.xml]
<?xml version="1.0" encoding="iso-8859-1"?>
<arraydata>
<value>one</value>
<value>two</value>
<value>three</value>
</arraydata>
[XML]
[code]
<script type="text/javascript">
var X; // The use of a global can be avoided if not using IE
function loadXML(xmlFile)
{
var oLoadedXML;
// Mozilla et al
if( document.implementation && document.implementation.createDocument ) {
oLoadedXML = document.implementation.createDocument("","",null) ;
oLoadedXML.async=false;
var loaded = oLoadedXML.load(xmlFile);
if (loaded) {
X = parseXML(oLoadedXML);
}
// Internet Explorer
} else if( window.ActiveXObject && /Win/.test(navigator.userAgent) ) {
oLoadedXML = new ActiveXObject("Msxml.DOMDocument");
oLoadedXML.async = false;
oLoadedXML.onreadystatechange = function () {
if (oLoadedXML.readyState == 4) X = parseXML(oLoadedXML);
}
oLoadedXML.load(xmlFile);
// Code doesn't suit this browser
} else {
alert("Ooops, this script doesn't work in this browser.");
return;
}
}
function parseXML(oLoadedXML)
{
var allNodes = oLoadedXML.childNodes;
var i, j, x;
for (i=0, j=allNodes.length; i<j; i++){
x = allNodes[i];
if (x.tagName && 'arraydata' == x.tagName){
return parseArraydata(x);
}
}
return false;
}
function parseArraydata(n)
{
var x, i=0, dat=[];
for (var j=0, k=n.childNodes.length; j<k; ++j){
x = n.childNodes[j];
if (x.tagName && 'value' == x.tagName){
dat[i++] = x.firstChild.data;
}
}
return dat;
}
</script>
<input type="button" value="Load local file" onclick="
loadXML('data.xml');
alert(X);
">
[code]
--
Rob