Dynamic Content to the CrossTick scroller from an External File

[BalajiRamesh]

1) Script Title:
....Pausing up-down Scroller

2) Script URL (on DD):
....http://www.dynamicdrive.com/dynamicindex2/crosstick.htm

3) Describe problem:

I am have an external javascript file with variables on it. The same is being feeded as the array elements to the crosstick scroller. The problem is that, the javascript file keeps updating automatically every few minutes with new values for the variables.

Is there a way by which i could update the crosstick scroller with the new values without refreshing the entire page?

Any help on this is appreciated. This is my first post. Apologies if something is not right.

Thanks
Balaji

[BalajiRamesh]

It would be great if someone could reply on this one..

Thanks
Balaji

[jscheuer1]

Sounds complicated. I think you would need a function like so in a file named - say, update.php (if using asp, use the .asp extension) (the array values could be populated however you like - using PHP or asp for example - but, they would have to be actually present in the function at runtime of the function):

function update_pausecontent () {
pausecontent.length=0;
pausecontent[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a><br />Comprehensive JavaScript tutorials and over 400+ free scripts!'
pausecontent[1]='<a href="http://www.codingforums.com">Coding Forums</a><br />Web coding and development forums.'
pausecontent[2]='<a href="http://www.cssdrive.com" target="_new">CSS Drive</a><br />Categorized CSS gallery and examples.'
}

The red parts would actually be server-side variables. You could even have an array generation javascript/server-side hybrid type file like getpics.php as used with this script:

http://www.dynamicdrive.com/dynamici...photoalbum.htm

Theoretically, whenever the values in this function are actually updated, it could be run but, the page would have no real way of knowing that.

If you are using server side code to update/populate them, this would be tricky as server side code only runs against the browser when it is loaded. There are probably various ways to try to get the browser to load an external script with these values and then run the function but, all might suffer from lag time under many situations or just be ineffective in even some modern browsers. Nothing would do the trick in many legacy browsers.

I would think that you could have time outs/intervals and a function on or linked to the page in another script something like so:

var checking;
function attach_update(test){
if (!test) {
if (checking)
clearTimeout(checking);
var newone=1;
var test=pausecontent[pausecontent.length-1];
var hd=document.getElementsByTagName('head')[0];
var scripts=hd.getElementsByTagName('script');
var upd=document.createElement('script');
upd.type='text/javascript';
upd.src='update.php';  //comment - use the .asp extension here if appropriate
for (var i_tem = 0; i_tem < scripts.length; i_tem++)
if (scripts[i_tem].src==upd.src){
hd.replaceChild(upd,scripts[i_tem]);
newone=0;
break;
}
if(newone)
hd.appendChild(upd);
}
else
var test=test;
if(typeof update_pausecontent=='function')
update_pausecontent ();
if (test==pausecontent[pausecontent.length-1])
checking=setTimeout("attach_update('"+test+"')", 100);
}

setInterval("attach_update()", 3*60*1000)

If you are using some other method to update the values, I'd like to know what it is as it might actually make things easier.

[BalajiRamesh]

HI John,

Thanks for the reply.,

I had followed a similar approach and setup a timeout for the function but since values were not available during the runtime of the function, they pretty much never refreshed.

After I posted the question, I did look around in the forum and found out that I would be able to add the Script tag dynamically...

var hd=document.getElementsByTagName('head')[0];
var upd=document.createElement('script');
upd.type='text/javascript';
upd.src='update.php'; //comment - use the .asp extension here if appropriate
hd.appendChild(upd);

I like this approach and i'll be implementing the same as performance is not an issue for me atleast on this & as You rightly mentioned this would keep on accumulating and add code to the DOM.

But I would like to know if there is a way by which we could remove the existing values or do some clean up of the existing values from the memory and the script tag from the code? Like for example, I add another script tag and have to remove the existing one during the second refresh... I know that this can be partially accomplished using the deleteNode method. The reason as to why we are skeptical, is because i am not sure if it will completely wipe out the existing content from the memory.

Thanks again for the reply

Cheers
Balaji

[jscheuer1]

I just updated the code in my previous post. It will take care of the cleanup and has some other improvements.

[jscheuer1]

Oh, and I forgot to mention that:

pausecontent.length=0

from my:

function update_pausecontent ()

wipes out the values.

[jscheuer1]

I tested this out in 'real life' conditions using php and found that there were a couple of problems. The worst one was that IE and Opera were caching the update.php file so that the first update would be carried out but, not subsequent ones. I took care of that and some other minor problems as well as writing it all as a configurable script. You might want to set:

//Set Check Interval
var checkinterval=10;
//Set Check interval units - use 1 for seconds, 60 for minutes
var checkunit=1;

for testing purposes as it will check every ten seconds, the defaults I'm posting with are:

//Set Check Interval
var checkinterval=3;
//Set Check interval units - use 1 for seconds, 60 for minutes
var checkunit=60;

which checks every 3 minutes. Here is a demo page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Update Array Script - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
//The below array simulates an original array from a script
var pausecontent=new Array()
pausecontent[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a><br />Comprehensive JavaScript tutorials and over 400+ free scripts!'
pausecontent[1]='<a href="http://www.codingforums.com">Coding Forums</a><br />Web coding and development forums.'
pausecontent[2]='<a href="http://www.cssdrive.com" target="_new">CSS Drive</a><br />Categorized CSS gallery and examples.'

/*Update Array Script © John Davenport Scheuer
 *as first seen in http://www.dynamicdrive.com/forums
 *username:jscheuer1
 *requires external updating file
 *this notice must remain for legal use*/

//Set Array Name to update
var up_array=pausecontent;
//Set Check Interval
var checkinterval=3;
//Set Check interval units - use 1 for seconds, 60 for minutes
var checkunit=60;
//Set path (optional - if required or desired) and source (required) of external file containing the update_up_array() function
var update_source='update.php';  //comment - use the .asp, .php or whatever extension here as appropriate

////////////Stop Editing//////////////
function attach_update(testing_it){
if (!testing_it) {
var newone=1,  dt=new Date().getTime();
var hd=document.getElementsByTagName('head')[0];
var scripts=hd.getElementsByTagName('script');
var upd=document.createElement('script');
upd.type='text/javascript';
upd.src=update_source+'?ud='+dt;
for (var i_tem = 0; i_tem < scripts.length; i_tem++)
if (scripts[i_tem].src.indexOf(update_source)>-1){
hd.replaceChild(upd,scripts[i_tem]);
newone=0;
break;
}
if(newone)
hd.appendChild(upd);
}
if(typeof update_up_array=='function'){
update_up_array ();
update_up_array=null;
}
else
setTimeout("attach_update('t')", 100);
}

setInterval("attach_update()", checkinterval*checkunit*1000)
</script>
</head>
<body>
<input type="button" value="see what's up" onclick="alert('pausecontent\'s length='+pausecontent.length+'\npausecontent\'s last item='+pausecontent[pausecontent.length-1]+'\nnumber of scripts in the head='+document.getElementsByTagName('head')[0].getElementsByTagName('script').length)">
</body>
</html>

and here is a demo update.php file:

/*possible update.php contents - good for testing purposes*/

function update_up_array () {
up_array.length=0;
up_array[0]='bob'
up_array[1]='<? print date("F d, Y H:i:s", time())?>'
}

I did not test this with the actual script involved. I will leave that up to you. If it initializes off of the original array and then never checks its length or contents, there will probably be problems but, I don't think it does. Other problems may arise. I will also leave up to you formulating your own optimal update.php file. It must be a function though, not merely an array. If you do have trouble with it, let me know. Make sure the test version is working first.

[BalajiRamesh]

Hi John..

Thanks for the reply!

I am just back in office and will test this today and get back to you.

Cheers
Balaji