How can I make an AJAX refresh like Gmail's inbox?

Question

I'm making a messaging system and I am currently reloading the content of the div holding the messages every 10 seconds using jQuery's .load(), but I have a problem: When trying to make a "Select all" button, "Delete selected" button, etc. when that 10 seconds comes up it reloads the buttons and it reloads the messages, so the messages get deselected because of the reload.

What I would like to know is how to make it actually load in new messages, but not actually reload the whole div. I know that Gmail does not reload the whole div because it works properly.

This is my JavaScript function that reloads the div and changes the page title (that has inbox count) so it stays updated:

function title() {
setTimeout("document.title = $('#heading').text();", 500);
}
function ajaxStuff() {
setTimeout("$('#heading').load('/employee/message/inbox.php #h1_head'); $('#messages').load('/employee/message/inbox.php #messages_inner');title();ajaxStuff();", 10000);
}
ajaxStuff();

Here is how I have the inbox set up:

Basically what I want to do is load in new messages with AJAX but somehow not refresh the div. I tried looking at Gmail's source but there's too much to go through and they make it confusing with a bunch of random classes and IDs.

Note: I have searched this on Google for a while now and did not find anything.

Answer 1

In response to comments:

I don't think a tutorial is warranted here. Change your server code to return the "new" messages with a class="new" attribute, then use:

$.ajax({
  url: "/employee/message/inbox.php",
  success: function(result) {
    $(result).find(".new").prependTo("#heading");
  }
});

Of course, that code may need some modifications to fit your environment/return data.

Answer 2

When checking for new messages send an ID of the newest message in your request. Then your php will return only everything newer that you add to your existing data.

    jQuery.ajax({
        type: 'get',
        dataType: 'text',
        url: "/employee/message/inbox.php",
        data: {
            from_user : from_user, 
            to_user: to_user, 
            message_id: message_id,  
            something_else_you_need_to_send: its_value 
            t: Math.random() 
        },
        success: function(data, textStatus){
                      // whatever you need to do with the result returned from php (server)                    
        }

Then in your sql query you do

select * from table 
  where user_id=user_id_from_ajax 
    and message_id > message_id_from_ajax`

update

in your php you use

    $from_user = $_REQUEST['from_user'];
    $to_user = $_REQUEST['to_user'];
    $message_id = $_REQUEST['message_id'];