Loading js file dynamically

max · Jun 25, 2006

Hello,

Based on various posts, I've come up with the following code to load
data into a js array dynamically without a screen refresh. It works,
but you have to push the button twice before it shows the new data that
you have changed in the js file. It's almost like something is being
cached. Can anyone help? Following is the code from the php and js
file:

test.php
------------
<html>
<head>
<script id="mydata" src="test.js" type="text/javascript"></script>
<script>

var mysplitdata;
function refresh_data () {

document.getElementById('mydata').src='test.js?x=' +
Math.random();
mysplitdata = myData.split(",");
}

</script>

</head>

<body>

<button
onclick="refresh_data();document.getElementById('mydiv').innerHTML=mysplitdata[2];">Click
Me</button>

<div id="mydiv" style="border: 1px solid
black;height:100px;width:300px;"></div>

</body>
</html>

test.js
---------
var myData = "name1,name2,name3";

So basically, if you change element 'name3' in test.js to let's say,
"testname", then click on the button on test.php, nothing happens
although you see the loading action at the bottom of the screen.
However, hit the button again and the you will see "testname".

Can anyone tell me why this is happening? How can I click the button
once to get the new data?

Thanks,
Max

Ivo · Jun 25, 2006

Based on various posts, I've come up with the following code to load
data into a js array dynamically without a screen refresh. It works,
but you have to push the button twice before it shows the new data that
you have changed in the js file. It's almost like something is being
cached.

<html>

No doctype?

<head>

No title?

<script id="mydata" src="test.js" type="text/javascript"></script>
<script>

No type attribute?

var mysplitdata;
function refresh_data () {
document.getElementById('mydata').src='test.js?x=' +
Math.random();
mysplitdata = myData.split(",");

What is the variable myData? You don't mean to refer to the element with id
"mydata", do you? Remember Javascript is very sensitive to case: D is not d.
Also, the split() method is a method of strings. You can't split an element
with it, only its contained textnode.
Reading on in your post, I find that myData is the variable to download. But
a new file takes some time, however short, to download. You can't expect its
content to be available on the very next line in your script. IE may have
some events that you could bind a handler to, onreadystatechange, onload for
script files, but none of these are cross-browser compatible.

It may an idea to put the commands to run after the file has loaded, in the
file itself. Or at least the call to a function that processes the data.

hth
ivo
http://4umi.com/web/javascript/

Randy Webb · Jun 25, 2006

Ivo said the following on 6/25/2006 5:07 PM:

No doctype?

No title?

No type attribute?

Irrelevant and not needed except by the validator. And in the absence of
something to the contrary, it will default to Javascript.

That line will only work in IE. If you want to dynamically load .js
files on the fly in a cross browser manner then you dynamically create
the script element:

function loadJSFile(fileURL){
var newScript = document.createElement('script');
newScript.type = "text/javascript";
newScript.src = fileURL;
document.getElementsByTagName('head')[0].appendChild(newScript);
}

and then call it like this:

loadJSFile('URLToJSFile');

It needs some feature detection added, and it can have some other
fallback paths but that is the basic script needed in modern browsers.

What is the variable myData?

It is an array in the test.js file that was posted.

You don't mean to refer to the element with id "mydata", do you?

No, its a reference to an array. And even if it were the element with id
of mydata a script element doesn't have a split().

Remember Javascript is very sensitive to case: D is not d.

It's a good thing or the above code would error out.

Also, the split() method is a method of strings. You can't split an element
with it, only its contained textnode.

Again, it is a reference to an array that is in the external file. The
code for it is in the original post.

Reading on in your post, I find that myData is the variable to download.

Then why all the ranting/rambling about myData versus mydata?

But a new file takes some time, however short, to download.

Precisely the problem. A timing issue.

You can't expect its content to be available on the very next line in your script.

You can expect it, but you will be disappointed.

IE may have some events that you could bind a handler to, onreadystatechange,
onload for script files, but none of these are cross-browser compatible.

And none of them are needed.

It may an idea to put the commands to run after the file has loaded, in the
file itself. Or at least the call to a function that processes the data.

That is the only reliable way to solve the problem in a cross browser
manner.

..js file:

//data
someFunctionInThePageItselfThatProcessesThisData()

Danny · Jun 26, 2006

Well, this line
document.getElementById('mydata').src='tes.js?x=' + Math.random();

is reassigning the .src of the <script> element with a random number, which is a way to trick
any browser to let it think re-request it from the server, since test.js?12433 is supposedly
according to the browser, NOT the same file/request as test.js, so, the browser ends up
rerequesting it, and thus NOT using cache, is used to bypassed cached pages, and test.js it
seems to be not-static on the server, anyhow

The timing occurrs on runtime execution, this line
onclick="refresh_data();document.getElementById('mydiv').innerHTML=mysplitdata[2];">Click
Me</button>

does 2 things, re-assigns .src, and thus re-requesting the test.js file, which by the way,
incurrs on some server response timing, meaning, whatever has been requested THIS ONCE, will
not be going to the .innerHTML bit yet, since it's not ready, the server is still processing,
it has taken a few milliseconds, so, the 2nd click you do, shows THE OLD data of mysplitdata[]
array, NOT the currently being fetched by means of refresh_data()

anyhow, I get the same thing sometimes when I do a form submission and close the window,

the workaround is, give some timing for the 2nd statement, so it waits on the 1st statement

onclick="ONE();setTimeout('TWO()',2000)" // 2000 ms btw

Danny

Randy Webb · Jun 27, 2006

Danny said the following on 6/25/2006 11:49 PM:

Well, this line
document.getElementById('mydata').src='tes.js?x=' + Math.random();

is reassigning the .src of the <script> element with a random number,

No it's not.

which is a way to trick any browser to let it think
re-request it from the server,

It is not a trick, it is the way the web works. It is loading a
different resource. But from your past, I wouldn't expect you to
understand that.

since test.js?12433 is supposedly according to the browser, NOT the same
file/request as test.js,

Probably because it *isn't* the same file.

so, the browser ends up rerequesting it,

As it should.

and thus NOT using cache,

It does use the cache. But since the document requested isn't in the
cache it *must* get it from the server.

is used to bypassed cached pages, and test.js it seems to be not-static
on the server, anyhow

Maybe, maybe not.

The timing occurrs on runtime execution, this line
onclick="refresh_data();document.getElementById('mydiv').innerHTML=mysplitdata[2];">Click
Me</button>

does 2 things, re-assigns .src,

No it doesn't.

anyhow, I get the same thing sometimes when I do a form submission and close the window,
the workaround is, give some timing for the 2nd statement, so it waits on the 1st statement

onclick="ONE();setTimeout('TWO()',2000)" // 2000 ms btw

No, that is *not* the solution. But again, it can't be expected of you
to understand that.

Your newsreader is severely flawed. Probably starting with, but not
limited to, the person using it.

I want to Display Excel As HTML In js	2	Feb 24, 2023
Using JS to verify registration info?	1	Mar 19, 2020
My sliding panel in React Js with graphs on it renders nothing but a blank screen--need help	0	Dec 9, 2019
Help me sort out this script	1	Oct 17, 2023
DJForm Login Help!	1	Sep 28, 2024
How to check the validation of js files or html files including js?	6	Jan 12, 2020
How do I output this recursive function correctly to a web browser?	2	Dec 17, 2022
Problems with using event handlers for button and textarea input	1	Nov 29, 2021

Loading js file dynamically

max

Ivo

Randy Webb

Danny

Randy Webb

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads