automatic refresh of only specific <div> element of a page in jquery

Question

How to refresh content of particular element instead of whole page, after some interval using Jquery?

When I used code shown below, its only appending same data several times after defined time duration, but I don't want this, I want only that data should be append if any new data inserted by user in mysql.

setInterval(function(){
    $.ajax({
        url:"confess_show.php",
        type:"GET",
        dataType:"html",
        success:function(data){
            $('.content').append(data);
        }
    });
}, 6000);

Answer 1

I would use a timestamp, as it doesn't need to get latest insert id of every update.

var timestamp = 0;

setInterval(function(){
    $.ajax({
        url:"confess_show.php?t=" + timestamp,
        type:"GET",
        dataType:"html",
        success:function(data){
            if(data != ''){ //Only append data if there are some new
                timestamp = Math.round((new Date()).getTime() / 1000); //Set timestamp to current time
                $('.content').append(data);
            }
        }
    });
}, 6000);

confess_show.php should then only fetch rows with a timestamp larger than $_GET['t']. That way, you don't need to keep track of the latest id shown.

Answer 2

Try using this:-

JS

 $(document).ready(function() {
   var refreshId = setInterval(function() {
      $("#responsecontainer").load('response.php');
      //OR THIS WAY : $("#responsecontainer").load('response.php?randval='+ Math.random());

   }, 5000);
   $.ajaxSetup({ cache: false });
});

HTML

<div id="responsecontainer"></div>

Create a file "response.php" and add php script there, it'll load that php code after every 5seconds(5000 = 5seconds)