...

View Full Version : Need help finding a way to automatically update content



jf2009br
06-29-2009, 07:28 PM
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.

rdspoons
06-29-2009, 07:59 PM
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).

jf2009br
06-29-2009, 08:13 PM
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?

rdspoons
06-29-2009, 08:37 PM
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.

jf2009br
06-29-2009, 08:39 PM
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?

rdspoons
06-29-2009, 09:18 PM
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


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.


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

jf2009br
06-29-2009, 09:40 PM
Yes, this helps very much! Thank you! :)


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


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.


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

jf2009br
06-29-2009, 10:09 PM
Is there a way to have the dynamic content (context.txt) be an image file instead?


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


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.


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

rdspoons
06-29-2009, 10:38 PM
Yes.
All you need to do is specify the image (or other dhtml) in the content file.

contet.txt


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



<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

jf2009br
06-29-2009, 10:44 PM
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.


Yes.
All you need to do is specify the image (or other dhtml) in the content file.

contet.txt


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



<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

rdspoons
06-29-2009, 10:57 PM
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


<div class="imgV">
<img src="images/house_0123.jpg" onclick="showHouse(this)" />
<div class="imgLabel">House 123</div>
</div>


To:
content.txt


<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.

jf2009br
06-29-2009, 11:30 PM
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.


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


<div class="imgV">
<img src="images/house_0123.jpg" onclick="showHouse(this)" />
<div class="imgLabel">House 123</div>
</div>


To:
content.txt


<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.

rdspoons
06-29-2009, 11:48 PM
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.



<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

triplewcheese
06-30-2009, 06:53 PM
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


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum