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 es 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.

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 es 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.

• javascript
• jquery
• ajax

• 2 instead of reloading the whole div, simply append or prepend(depending on if you want it at the top or bottom) the new messages only to the div. This will require using $.ajax instead of $().load – Kevin B Commented Oct 24, 2011 at 21:55
• @KevinB Awesome idea, but how? Are there any examples or tutorials? Thanks. – Nathan Commented Oct 24, 2011 at 21:57
• 1 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. – Radek Commented Oct 25, 2011 at 3:01
• @Radek Yeah, that's a good idea. So when I send it through the ajax request I wonder how I would do that. Also keep in mind that it is one table for all users (and then a from_user and to_user column in the database) and then I use the WHERE keyword in the MySQL Query to show the messages for only that user. So would this still work correctly like this? – Nathan Commented Oct 25, 2011 at 20:35
• Let's move our discussion under my answer. I hope it will work for you. – Radek Commented Oct 25, 2011 at 22:30

2 Answers 2

In response to ments:

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.

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'];