jQuery .load callback / scrolling / CSS overflow

Question

I'm working on a very simple jQuery based chat room (to be used in an introductory workshop). The current chats are displayed in a div set to 400px high and overflow auto.

jQuery's "load" function is used to retrieve HTML formatted chats from a database and place them into the div.

I've got some very simple code that ensures the chat div is scrolled to the bottom at all times. This code is in a function named scrollToBottom which is called using the completion callback feature in the load function:

The load statement is in a function called getChat, which is called when the page is ready and then once per second. Here's the relevant chunk of code:

$(function()
{
    getChat();
    setInterval("getChat();", 1000);
});


function getChat()
{
    $("#chatDiv").load("chat_server.php?get_chats=true", scrollToBottom() );
}


function scrollToBottom()
{
    var chatHeight = document.getElementById("chatDiv").scrollHeight;
    $("#chatDiv").scrollTop( chatHeight );
}

The Problem: The first time getChat is called, the div doesn't scroll to the bottom. In subsequent calls (via setInterval), the scrolling works fine.

Here's what I know / have done so far:

The callback IS being called the first time, however when I alerted the scrollHeight, it was "400" the first time and "441" subsequent times (i.e. what it should be when there is content bigger than the div size).

A scrollTop value of 400 for 441 high content should scroll to the bottom regardless, but when I put a hard value of 400 in scrollToBottom the problem persists. This makes me think the problem is related to CSS / scrolling rather than the load callback.

The chat div starts out empty, but changing it to include a nbsp or single letter didn't solve the problem. Making the div start out with enough hard-coded content to require scrolling DID solve the problem.

At this stage, it seems like the scrollbars need to be visible/active in order for scrollTop to work... but doesn't explain why it isn't working the first time - since the callback is meant to happen AFTER the content is loaded (and hence the scrollbar should be visible/active)...

Just to make it stranger still, it works fine if the callback function is an anonymous inline one...

$(function()
{
    getChat();
    setInterval("getChat();", 1000);
});


function getChat()
{
   $("#chatDiv").load("chat_server.php?get_chats=true", 
     function()
     {
        var chatHeight = document.getElementById("chatDiv").scrollHeight;
        $("#chatDiv").scrollTop( chatHeight );
     }
   );
}

This version works fine the first time and all subsequent times...

Can anyone shed any light on this situation? Thanks, Greg

Answer 1

In javascript, functions, anonymous or not, are first class, which means they can be passed as arguments. You needn't use the anonymous form, nor call the function the first time. Just pass scrollToBottom as an argument to load:

$("#chatDiv").load("chat_server.php?get_chats=true", scrollToBottom);

Likewise, you could simplify the setInterval call:

setInterval(getChat, 1000);