Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Need help finding a way to automatically update content

    I do not know much about this, so forgive me if I sound ignorant.

    We need to implement some sort of a script that will automatically check a location continuously. That location will be updated by us with a number that we want to display and update -- in realtime -- on our website. We don't want people to have to refresh the page on their own.

    Please let me know if there are solutions, or if clarifications are needed.

  • #2
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts
    You should use Ajax to dynamically load content into the page from your server. Both the web page and the changing content to display should be on the same sever.
    There are many many good examples available of using Ajax such as: http://sixrevisions.com/ajax/ajax_techniques/ (link good as of 6/29/09).

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rdspoons View Post
    You should use Ajax to dynamically load content into the page from your server. Both the web page and the changing content to display should be on the same sever.
    There are many many good examples available of using Ajax such as: http://sixrevisions.com/ajax/ajax_techniques/ (link good as of 6/29/09).
    Our main issue is that we don't want users to have to refresh/reload the page on their own. Will AJAX scripts allow for the specific content to change on its own?

  • #4
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts
    Yes. AJAX is used to add/replace content dynamically in the page without the user needing to interact. This means that you can update content on a page a user is looking at by changing the content in the file that the AJAX code reads from. The update 'read' takes place at any time interval you select, so you can set the content to update as often as you require.

  • #5
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rdspoons View Post
    Yes. AJAX is used to add/replace content dynamically in the page without the user needing to interact. This means that you can update content on a page a user is looking at by changing the content in the file that the AJAX code reads from. The update 'read' takes place at any time interval you select, so you can set the content to update as often as you require.
    Thank you! Do you know where I could find such a script?

  • #6
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts
    Here is a complete quick example I made and tested for you.
    It requires that you to put a content file you can edit at will named "content.txt" into the same folder on the server as this page.

    content.txt
    Code:
    This text will be seen in the page. Change it and it changes in the page dynamically.
    Note: the refresh trick used is adding a random number to the file name as an argument.
    [code]
    ajax.load("content.txt?rnd="+Math.random(),"content");
    [code]


    Here's the example:
    simpleAJAX.html
    Code:
    <html>
    <head>
    <meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
    <meta http-equiv="pragma" content="no-cache" />
    <title>
    
    </title>
    <style type='text/css'>
    
    </style>
    <script type="text/javascript">
    var ajax={
    	load:function(src,id){
    		var xmlhttp;
    		if (window.XMLHttpRequest){
    			xmlhttp=new XMLHttpRequest();
    		}else if (window.ActiveXObject){
    			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    		}else{
    			alert("Your browser does not support XMLHTTP!");
    		}
    		xmlhttp.onreadystatechange=function(){
    			if(xmlhttp.readyState==4){
    				document.getElementById(id).innerHTML=xmlhttp.responseText;
    			}
    		}
    		xmlhttp.open("GET",src,true);
    		xmlhttp.send(null);
    	}
    }
    
    function init(){
    	setTimeout(update,500);
    }
    
    function update(){
    	ajax.load("content.txt?rnd="+Math.random(),"content");
    	setTimeout(update,500);
    }
    
    window.onload = init
    </script>
    </head>
    <body>
    Hello
    <div id="content"></div>
    </body>
    </html>
    tested in ie7 and ff3
    Hope this helps
    Last edited by rdspoons; 06-29-2009 at 09:22 PM.

  • #7
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, this helps very much! Thank you!

    Quote Originally Posted by rdspoons View Post
    Here is a complete quick example I made and tested for you.
    It requires that you to put a content file you can edit at will named "content.txt" into the same folder on the server as this page.

    content.txt
    Code:
    This text will be seen in the page. Change it and it changes in the page dynamically.
    Note: the refresh trick used is adding a random number to the file name as an argument.
    [code]
    ajax.load("content.txt?rnd="+Math.random(),"content");
    [code]


    Here's the example:
    simpleAJAX.html
    Code:
    <html>
    <head>
    <meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
    <meta http-equiv="pragma" content="no-cache" />
    <title>
    
    </title>
    <style type='text/css'>
    
    </style>
    <script type="text/javascript">
    var ajax={
    	load:function(src,id){
    		var xmlhttp;
    		if (window.XMLHttpRequest){
    			xmlhttp=new XMLHttpRequest();
    		}else if (window.ActiveXObject){
    			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    		}else{
    			alert("Your browser does not support XMLHTTP!");
    		}
    		xmlhttp.onreadystatechange=function(){
    			if(xmlhttp.readyState==4){
    				document.getElementById(id).innerHTML=xmlhttp.responseText;
    			}
    		}
    		xmlhttp.open("GET",src,true);
    		xmlhttp.send(null);
    	}
    }
    
    function init(){
    	setTimeout(update,500);
    }
    
    function update(){
    	ajax.load("content.txt?rnd="+Math.random(),"content");
    	setTimeout(update,500);
    }
    
    window.onload = init
    </script>
    </head>
    <body>
    Hello
    <div id="content"></div>
    </body>
    </html>
    tested in ie7 and ff3
    Hope this helps

  • #8
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is there a way to have the dynamic content (context.txt) be an image file instead?

    Quote Originally Posted by rdspoons View Post
    Here is a complete quick example I made and tested for you.
    It requires that you to put a content file you can edit at will named "content.txt" into the same folder on the server as this page.

    content.txt
    Code:
    This text will be seen in the page. Change it and it changes in the page dynamically.
    Note: the refresh trick used is adding a random number to the file name as an argument.
    [code]
    ajax.load("content.txt?rnd="+Math.random(),"content");
    [code]


    Here's the example:
    simpleAJAX.html
    Code:
    <html>
    <head>
    <meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
    <meta http-equiv="pragma" content="no-cache" />
    <title>
    
    </title>
    <style type='text/css'>
    
    </style>
    <script type="text/javascript">
    var ajax={
    	load:function(src,id){
    		var xmlhttp;
    		if (window.XMLHttpRequest){
    			xmlhttp=new XMLHttpRequest();
    		}else if (window.ActiveXObject){
    			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    		}else{
    			alert("Your browser does not support XMLHTTP!");
    		}
    		xmlhttp.onreadystatechange=function(){
    			if(xmlhttp.readyState==4){
    				document.getElementById(id).innerHTML=xmlhttp.responseText;
    			}
    		}
    		xmlhttp.open("GET",src,true);
    		xmlhttp.send(null);
    	}
    }
    
    function init(){
    	setTimeout(update,500);
    }
    
    function update(){
    	ajax.load("content.txt?rnd="+Math.random(),"content");
    	setTimeout(update,500);
    }
    
    window.onload = init
    </script>
    </head>
    <body>
    Hello
    <div id="content"></div>
    </body>
    </html>
    tested in ie7 and ff3
    Hope this helps

  • #9
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts
    Yes.
    All you need to do is specify the image (or other dhtml) in the content file.

    contet.txt
    Code:
    <img src="images/red.jpg">
    The browser will render the image corrcetly, assuming that the image is really in the path (images/res.jgp in this example).

    The content file can contain as little or as much content as you need. It can conatain plain just text like the first example,
    or partial/full dhtml fragments like this:

    Code:
    <div class="imgV">
        <img src="images/house_0123.jpg" onclick="showHouse(this)" />
        <div class="imgLabel">House 123</div>
    </div>
    the example assumes a showHouse function exists in the document.

    tested in ie7, ff3, chrome2 , safari4
    Last edited by rdspoons; 06-29-2009 at 10:41 PM.

  • #10
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, that's what I figured. I tested it, though, and the image does not seem to auto-update since nothing in the content.txt file itself is actually changing. Just the image source.

    Quote Originally Posted by rdspoons View Post
    Yes.
    All you need to do is specify the image (or other dhtml) in the content file.

    contet.txt
    Code:
    <img src="images/red.jpg">
    The browser will render the image corrcetly, assuming that the image is really in the path (images/res.jgp in this example).

    The content file can contain as little or as much content as you need. It can conatain plain just text like the first example,
    or partial/full dhtml fragments like this:

    Code:
    <div class="imgV">
        <img src="images/house_0123.jpg" onclick="showHouse(this)" />
        <div class="imgLabel">House 123</div>
    </div>
    the example assumes a showHouse function exists in the document.

    tested in ie7, ff3, chrome2 , safari4

  • #11
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts
    With this setup you need to change the src of the image in the content.txt file to change the image.
    Changing the jpg image itself will not cause an update. Let me know if that's what your after.

    For the current set up you can update the content (image) by changing the content file like this...
    from:
    content.txt
    Code:
    <div class="imgV">
        <img src="images/house_0123.jpg" onclick="showHouse(this)" />
        <div class="imgLabel">House 123</div>
    </div>
    To:
    content.txt
    Code:
    <div class="imgV">
        <img src="images/apartment_432.jpg" onclick="showHouse(this)" />
        <div class="imgLabel">Apartment 432</div>
    </div>
    The image and label will automatically update on the next time interval as soon as you save the changes
    in content.txt to the server. Don't forget to save the changed file onto the server - it's easy to forget.
    Last edited by rdspoons; 06-29-2009 at 11:26 PM.

  • #12
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's what I figured... there isn't an easier way? The whole file is an image of a number that I will continually update.

    Thank you for your help thus far.

    Quote Originally Posted by rdspoons View Post
    With this setup you need to change the src of the image in the content.txt file to change the image.
    Changing the jpg image itself will not cause an update. Let me know if that's what your after.

    For the current set up you can update the content (image) by changing the content file like this...
    from:
    content.txt
    Code:
    <div class="imgV">
        <img src="images/house_0123.jpg" onclick="showHouse(this)" />
        <div class="imgLabel">House 123</div>
    </div>
    To:
    content.txt
    Code:
    <div class="imgV">
        <img src="images/apartment_432.jpg" onclick="showHouse(this)" />
        <div class="imgLabel">Apartment 432</div>
    </div>
    The image and label will automatically update on the next time interval as soon as you save the changes
    in content.txt to the server. Don't forget to save the changed file onto the server - it's easy to forget.

  • #13
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts
    Yes.

    If all you want is to update an image automatically. here is a sample code...
    It requires the image to be in a subfolder called images. In the example the image
    is called red.jpg, and the update time interval is set for 2 seconds.

    Code:
    <html>
    <head>
    <title>
    
    </title>
    <style type='text/css'>
    
    </style>
    <script type="text/javascript">
    var cntr=0;
    var $=function(n){return document.getElementById(n)}
    function init(){
    	setTimeout(updateImage,2000);
    }
    function updateImage(){
    	$("divcntr").innerHTML=cntr++;
    	$("img1").src="images/red.jpg?rnd="+Math.random();
    	setTimeout(updateImage,2000);
    }
    window.onload = init
    </script>
    </head>
    <body>
    <div id="divcntr"></div>
    <img id="img1" />
    </body>
    </html>
    (The dollar "$" is only a helper function and not important).

    As you see, the trick is still in the random argument added to the src.
    Here you only load up the image - no document framents. Same technique can be used for iframes.

    The actual image name of the updated image you save does should not change (if the original image is named red.jpg, any updates should be named red.jpg, over-writing the old image).

    As soon as you save the updated image to server it will update on the page in the next time-inteval.

    As this is loading a new image at each time interval, the browser will show download activity.

    Changed the source above to include a simple loop counter so you can see a time-interval count.

    tested in ie7, ff3
    Last edited by rdspoons; 06-30-2009 at 12:01 AM.

  • #14
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is there an easy way to keep the function from updating the responseText if the file has not changed? I have a site that needs to sit in a static state until a single file changes.

    I've tried

    Code:
    if(xmlhttp.readyState==4){
    			if (document.getElementById(id).innerHTML=xmlhttp.responseText) {
    			document.getElementById(id).innerHTML = 'was the same';			
    			}else{
    			document.getElementById(id).innerHTML=xmlhttp.responseText;
    		}
    	}
    but it just breaks the page. What am I missing


  •  

    Posting Permissions

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