473,394 Members | 1,700 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,394 software developers and data experts.

Loading js file dynamically

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
4 2750
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
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

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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Ola Fjelddahl | last post by:
hi. I load a script dynamically and it works * everytime with IE6. * sometimes! with Mozilla1.5 <- makes me curious * never with Opera7.11 all tests on WindowsXP. With "sometimes" I mean
2
by: Kristjan Sander | last post by:
Hello I am trying to write a #C windows desktop application that loads an ascx file contents (user control) from file, initiates it and then registers to database everything it finds. I tried that...
2
by: Foehammer | last post by:
Hello, I'm trying to load an assembly dynamically using an app domain. This is a proof-of-concept for a larger project, so please excuse the lame class names. TestLib is the dll where all the...
1
by: Benjamin | last post by:
Hi, I'm currently writing a Web Services that interacts with a database. To allow me to use not just one database provider (for example, I could use MS Access, SQL Server or MySQL), the Web...
4
by: John | last post by:
Hi all, I'm having a little problem understanding the concepts of dynamically loading/unloading user conrols: 1. If I have a couple of usercontrols embedded within a few tables cells on my...
17
by: CES | last post by:
All, I was wondering if their is a way of loading an external script fill from within a script?? <script language="javascript" type="text/javascript"> function test(var){ <script...
2
by: Dave A | last post by:
I just don't get this... If I need to dynamically load controls into a web page I simply need to go PlaceHolder1.Controls.Add(new Button()); or similar. However when I need to dynamically...
6
by: Dan Dorey | last post by:
I actually have two questions here, but I'll start by giving an outline of what I'm trying to do. I'm building an app with a simple plugin architecture (all in the same app domain). I have each...
5
by: Pete Marsh | last post by:
Wondering if anyone can recomend some sample code for dynamically loading the GD module. I have tried setting the extension dir in php.ini, and loading the GD module from there when apache is...
20
by: Nickolai Leschov | last post by:
Hello all, I am programming an embedded controller that has a 'C' library for using its system functions (I/O, timers, all the specific devices). The supplied library has .LIB and .H files. ...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.