Thanks for taking the time to look at my post. I have a simple Homeserver which I use for a small group of people to keep contact with and provide updates of club events,
On one the of WEB Pages I have a Table and within the Table there is an Object statement –
When the message.txt ( notepad file ) is updated remotely by another user the WEB page wont show the updated message until you refresh it.
I have tried using the <META HTTP-EQUIV=“PRAGMA” CONTENT=“NO-CACHE”> to stop pages being cached but of course if a person is already using the page they wont see the new message until they move off the page and back again.
If I use - <meta http-equiv=“refresh” content=“5”, then it works but as the page does have some images on it the whole page flickers when it updates every so many seconds it does look not so good and very annoying.
I have been looking for a Javascript code to just refresh that particular part of the WEB page table but cannot find anything suitable that seems to work. On one Forum another they say that it is impossible but on another forum a user said he already has got this working but could not remember the code…I don’t want to use any Server side code as my server is really basic but does the job.
As you can tell I am not the best programmer in the world so any help would be appreciated
AFAIK, there is no way that your web page can know when a remote file is updated.
What you could do however, is write a function that loads the contents of the text file into a predefined div using AJAX.
You could repeat this at a predefined interval.
Using AJAX would not be so heavy on the server and would avoid the ugly page flicker you described.
Here’s an example:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
// load text file when page loads
$("#div1").load("test.txt");
// Then reload it every 5 seconds, for ever ...
setInterval(function(){
$("#div1").load("test.txt");
}, 5000);
});
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
To run this, save this code in a HTML file on your desktop. Then create a file called test.txt, write something in it and save it.
Next, open the HTML document in (for example) Firefox. Don’t use chrome when testing locally as it will block the XMLHttpRequest owing to its same origin policy.
Make sure the text file has loaded into the HTML document as it should, then alter the text file in some way and save it again.
You should see the changes appear in your web page within five seconds.
I’m not sure if this is the best way to approach things.
Would be glad to hear of any other approaches.
It’s a neat little solution, the only thing that could be problematic here is caching. However, I did do a quick test in Chrome and Safari and it seemed to work just fine (being served from a local Apache server).
John: If caching does present itself as a problem, amend @James_Hibbard ;'s excellent example a tiny bit like so:
$(document).ready(function(){
// load text file when page loads
$("#div1").load("test.txt");
// Then reload it every 5 seconds, for ever ...
setInterval(function(){
$("#div1").load("test.txt?"+ (new Date()).getTime()); //append current timestamp
}, 30000); //consider a larger timeout unless your data updates very frequently
});
Hi there my good friend. The code work great locally if I just use it to test but if I place the code on my WEB server if does not refresh the txt. Just to clairify, if I run your code or put your code into my WEB page code, it will work perfect if it is just called from the local folder it is in and the message does update automatically, but not if I place it on the WEB server and call it from the WEB address. Not sure why as I have other javascript page code working fine. I guess I am missing something but have idea what it is. I do hope you can give me some Guidence as it is almost working as I want. Oh, I did realise that the WEB server does not know that the file had been updates ( in your comments ) but as long as the WEB page TXT section updates every so many seconds then I am happy with that. If you can help then I would be most grateful… Regards John
Just to check I understood correctly:
The code that I supplied works locally, but when you upload it to your server, it stops working (i.e. the page doesn’t automatically load changes to the text file).
Is that correct?
Where on your web server have you saved the html file?
Where on your web server have you saved the text file?
Hi There my good friend… Very strange thing, I found that in the page there was a <body> tag near the end of MY code which was not affected locally and after I removed that it is now working on the WEB server. Only done a quick test but I thnk YOU have cracked it. I have not yet found a way to get the txt to be shown in a Table layout to make is more obvious but maybe that can’t be done but many thanks to you.
Is it really good how you professinals can help us poor relations :~) regards John
Just so you know, you can also have arbitrary HTML in the text file, so if you wrote, for example <h1>Hello</h1>, it would be interpreted as a heading in your web page.
Ergo, there is nothing to stop you from marking up whatever is in the text file as a table and having it display as such.
If you need any help doing this, just let me know.
Hello my friend… I did try your extra bit of code but for some reason the date and time does not display. ( at least I think that is what it is supposed to do ). I notice there is a ? mark in the “test.txt?” Is that supposed to be there? If there is a way to show the date and time of update it would be very useful. I expect it is me who has not done something correct but it does show the updates.
I’m afraid you have misunderstood this.
The ? following the file name indicates that a parameter is being passed to the file.
This is quite a common occurrence on the web.
If you look at the url when you reply to a question on the SitePoint forums, for example, you see something like: http://www.sitepoint.com/forums/newreply.php?do=newreply&p=5228177.
Notice the question mark after the name of the file.
What this parameter is intended to do in your case, is to prevent browsers from caching the file, so that it always updates
The way it works is to append a unique string after the question mark, then the browser always treats the file as a new file, even if the contents are the same.
In this case AussieJohn was using a timestamp as a unique identifier.
If you wanted to display the time of the last update, this would be possible, too.
Hello Pullo yes I did misunderstand so I appolgise for that. I was so eager to get the script working I did not read it correctly
I am now having a problem with my local WEB updating again so I will have to reload everything and start again. It wil take a week between work so I will let you know how I get on . Thanks again for all your help. Regards John
Hello you clever people… Finally got it working and in the end I did use the central part of the code from Aussie John which now works perfect. So many thnaks for taking you time and expertise to help me. Maybe the problem was the Windows Home Server Add On “Whiist” which is the WEB part of it which has some weird interaction but other javascript stuff has aways worked OK. Anyway, thanks again, Best regards John
which was not affected locally and after I removed that it is now working on the WEB server. Only done a quick test but I thnk YOU have cracked it. I have not yet found a way to get the txt to be shown in a Table layout to make is more obvious but maybe that can’t be done but many thanks to you.