Timeline that gets updated every 10 seconds

Question

I want to make a timeline that updates every couple of seconds and doesn't need the page to be refreshed(it would get the info from a separate file that updates on a server), is there any JQuery that will make this is easy? could anyone show me an example on a webpage? Also the data gets updated on a fixed interval of 10s if that matters. And if possible I would like to stick to just CSS3 HTML5 and JQuery

Answer 1

Very simple js, no need for jQuery for the "update every 10 seconds"

// set interval
var interval = setInterval(mycode, 10000);
function mycode() {
  // your ajax request or your function call to fetch data
}
function abortTimer() { // call to stop the timer
  clearInterval(interval );
}

for more info : great post about a similar queston

Answer 2

1. First do $.ajax request.
2. call refreshTimeline to handle your response data and display on success or error.
3. wait 10 seconds and re-Ajax again.

See this example:

     function request() {
      $.ajax({
        url: "your.php",
        data: {}, //if there data to send
        // recommended to use json and parse on success
        //dataType:"json", 
        success: refreshTimeline, // try to refresh if success
        error: refreshTimeline, // try to refresh if error
       });
     }

    function refreshTimeline(data) {
      //handle data as you like
      $("#time_line").html(data);
      setTimeout(request, 10000); //wait 10 sec and request again
    }

    request(); // start ajax request