Results 1 to 8 of 8

Thread: Dynamic Content to the CrossTick scroller from an External File

  1. #1
    Join Date
    Oct 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Dynamic Content to the CrossTick scroller from an External File

    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

  2. #2
    Join Date
    Oct 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

    Thanks
    Balaji

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Code:
    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:

    Code:
    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.
    Last edited by jscheuer1; 10-30-2006 at 10:03 AM. Reason: Improve attach_update function
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Oct 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Oh, and I forgot to mention that:

    pausecontent.length=0

    from my:

    function update_pausecontent ()

    wipes out the values.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    //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:

    Code:
    //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:

    Code:
    <!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:

    PHP Code:
    /*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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Oct 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John..

    Thanks for the reply!

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

    Cheers
    Balaji

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •