Update the content of a div via AJAX with jQuery when they're new events

Question

I am doing a match "live timing" where an administrator sends to a database new inputs like: "Team A scores! 1-0". This is shown in a public website inside a <div /> and I want to get the new inputs and print it. I've never done something similar and I don't know what is the way to go.

I also have some doubts:

1. It's posible that the server sends the content to a X browser? So do the browser will only be on "idle"?
2. It's possible to only refresh when the user is active on the browser? Like Facebook does, if you're not present on the browser or moving your mouse over you don't get updates.
3. It's possible to append only to the <div /> the new items and not refresh all of it?

Thank you in advance!

Answer 1

You can use the ajax methods like this one:

$.getJSON('ajax/test.json', function(data) {

  $('.result').html($('.result').html()+'<p>' + data.foo + '</p>'
    + '<p>' + data.baz[1] + '</p>');
});

or:

$.ajax({ url: "test.html", context: document.body, success: function(){

....................................... }});

With a setTimeout call:

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

  function update() { 
  $.getJSON(.................);
    setTimeout(update, 3000);     }
  }
)();

Then you could bind a mouseover event to the div that wraps your web, that would force an ajax call. You should use a control variable to know when the call is processing, so no to duplicate it.