By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,503 Members | 1,143 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,503 IT Pros & Developers. It's quick & easy.

Loading js file dynamically

P: n/a
max
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('m ydiv').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

Jun 25 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Ivo
<ma*@kipness.com> schreef

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/
Jun 25 '06 #2

P: n/a
Ivo said the following on 6/25/2006 5:07 PM:
<ma*@kipness.com> schreef
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?


<sigh> It never ends.
<head>


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


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.
var mysplitdata;
function refresh_data () {
document.getElementById('mydata').src='test.js?x=' +
Math.random();
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.
mysplitdata = myData.split(",");


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()

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jun 25 '06 #3

P: n/a

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('m ydiv').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
Jun 26 '06 #4

P: n/a
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('m ydiv').innerHTML=mysplitdata[2];">Click
Me</button>

does 2 things, re-assigns .src,
No it doesn't.

<snipped more moronically idiotic babbling>
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.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jun 27 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.