Ajax chat issues

[tomfmason]

I am not sure exactly how to phrase this but I will try anyway.

Ok I have written a Ajax support chat app. and I am running into an issue. I will give a real basic example of what I mean..

Example chat:

Name: Message:
Tom test
Tom test2
Tom test3
Tom test4
Tom test5

OK now lets say the the 5th message fills the chat box. When I enter a new message I have to scroll down to see the next message. This continues throughout the chat session.

I guess what my question is... How can I focus the chat box to the last message.

Here is a the section of the process.php that deals with the retrieval of the chat text.


case "getChat":
$sql = "SELECT * FROM `chat_text` ORDER BY `text_id` ASC";
$res = mysql_query($sql);
$param = "";
if (mysql_num_rows($res) == 0) {
echo "Ready to chat.";
}else{
while ($rw = mysql_fetch_assoc($res)) {
$param .= '<b>' . $rw['name'] . '</b>: ' . $rw['text'] . '<br />';
}
}
//I added this because so that I maybe able to focus on this id
$param .= '<div id="end"></div>';
echo $param;
break;


now here is the js function that gets the chat


function getChat() {
getText.open('get', 'process.php?action=getChat');
getText.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
getText.send(null);
getText.onreadystatechange = handleGetChat;
}

function handleGetChat() {
if (getText.readystate == 4) {
var chatText = getText.responseText;
document.getElementById('chatBox').innerHTML = chatText;
chatTimer = setTimeout('getChat();', 2000);
}
}

Any suggestions would be great.

Thanks,
Tom

[sridhar_423]

set an Anchor at the bottom of 'chatBox' and focus it using SetInterval.

[tomfmason]

I may be wrong but I thought that setInterval was for setting with timing. Could you give me an example of what you mean..

thanks,
Tom

[sridhar_423]

<a name="tag"></a>

setInterval("document.location='#tag",1000);

[tomfmason]

Ok i think I know what you meant now.. I quess I could just do this in the handleGetChat function.


function handleGetChat() {
if (getText.readystate == 4) {
var chatText = getText.responseText;
document.getElementById('chatBox').innerHTML = chatText;
document.location='#tag';
chatTimer = setTimeout('getChat();', 2000);
}
}

I think that would do the same thing right..?
I am aready setting the time out to 2 seconds so I know that another message will not appear before the time out is reached..

I will test it.. I don't know why I didn't think of that already.

Thanks,
Tom

[tomfmason]

yea that worked fine..

I really appreciated the help.

Thanks again,
Tom

[tomfmason]

Well now there is another issue that came up. Now every time the page reaches the timeout I have to click on the text box again. So every 2 seconds I have to click on the text box again. That will really annoy the chatters..lol

So I thought that I would use something like

document.getElementById('chatText').focus();

but that does nothing. Any suggestions?

Thanks,
Tom

[sridhar_423]

document.getElementById('chatText').focus();
will just focus the textarea/text box but will not provide the scroll needed though the cursor jumps to that box.

As i hav already said, use setInterval. It's the best way to do in your case.
if(chatTimer=="")
chatTimer = setInterval("document.location='#tag'", 2000);
Note: chatTimer should be a global variable