Auto-refresh
text

Question

This has been well answered several times, but being new to js I must be missing something basic.

My simple chat page works well, but refreshes only on manual call, and I want it to auto-refresh.

The php fetches the comment via POST, writes it to the log file (in the same directory), then writes the updated log file to the div.

<div id="show"><?php include 'LOG.txt' ; ?></div>

I adapted the following code from another post and tried it in header and in body, but it is not working.

<script type="text/javascript">
    function doRefresh(){
        $("#show").load("LOG.txt");
    }
    setInterval(function(){doRefresh()}, 5000);
</script>

What does this need?

Thank you.

score 3 · Accepted Answer · answered Oct 20 '16 at 20:35

3

Your code is mostly correct. However, you want to make sure that you only fire the function only at DOM ready, if your code is in the header. And of course you have to include jQuery.

NOTE: If you place your code just before </body> as it is, it should work.

<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript">
    function doRefresh(){
        $("#show").load("LOG.txt");
    }
    $(function() {
        setInterval(doRefresh, 5000);
    });
</script>

answered Oct 20 '16 at 20:35

PeterKA

24,158
5
26
48

Very helpful. Thank you. – Andante88 Oct 22 '16 at 18:39
Glad you found this helpful. Please feel free to upvote and accept as answer if your issue was resolved by this code. – PeterKA Oct 24 '16 at 01:51
Load frequency: Could there be a problem with 1 sec? Low lag is nice for chat. This is an ultra light siuation: private website, unlimited-bandwidth hosting, 5k page file, log file truncates to 5k, one pair of users. Testing with dual browsers seems fine. But am I missing something? Thank you. – Andante88 Oct 25 '16 at 00:04
@PeterKA This no longer works due to an error that every browser reports - ```Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///...``` https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp?utm_source=devtools&utm_medium=firefox-cors-errors&utm_campaign=default . Do you have an alternative solution that may still work? – Shrenik Oct 04 '20 at 17:02
Please take a look at https://stackoverflow.com/questions/41492417/is-the-file-protocol-for-web-browser-links-defunct – PeterKA Oct 04 '20 at 22:46

score 0 · Answer 2 · edited May 23 '17 at 12:33

0

try Via Ajax

function doRefresh(){
   $.ajax({
      url : "helloworld.txt",
      dataType: "text",
      success : function (data) {
         $(".text").html(data);
      }
   });
   setTimeout(function() {
      doRefresh();
   }, 2000);
}

$(document).ready(function () {
  doRefresh(); 
});

Check console for Error.

https://stackoverflow.com/a/6470614/6079755

edited May 23 '17 at 12:33

Community

1
1

answered Oct 20 '16 at 20:23

$("#show").load("LOG.txt"); this is ajax and the correct way is get show the information with ajax... other way can be exploited by hackers – Oct 20 '16 at 20:35
Very helpful. Thank you. – Andante88 Oct 22 '16 at 18:39

score 0 · Answer 3 · answered Oct 20 '16 at 20:28

setInterval() method will continue be calling until clearInterval() method is called, or when window is closed. setTimeout() method calls a function after a specified number of milliseconds.

I'm used to treat such cases as the example below :

function doRefresh()
{
  $("#show").load("LOG.txt");
  setTimeout(function() {
    doRefresh();
  }, 2000);
}

$(document).ready(function () {
  doRefresh(); 
});

By calling function itself like this example, with the setTimeout() method, it will be called every 2 seconds.

See my jsfiddle version

Auto-refresh text

3 Answers3

Auto-refresh
text