HOME  |  AJAX  |  SOLUTIONS  |  TECHNOLOGIES  |  E-COMMERCE  |  ABOUT US
Usability Additions

We can see that we have a semi-functioning AJAX driven chat application.  To finish off part one of this tutorial, we will make a few small additions to the HTML in order to make it a bit more user friendly.

One of the first things you'll probably notice is that when you type a message and press enter, the page refreshes and your message isn't added.  You have to actually click the "Send" button to add your message to the chat.

To fix this, we will add a simple JavaScript function that is called on the form's submit event.
<form id="frmmain" name="frmmain" onsubmit="return blockSubmit();">
This function will call our sendChatText function and return false to keep the form from submitting.
//This functions handles when the user presses enter.  Instead of submitting the form, we
//send a new message to the server and return false.
function blockSubmit() {
sendChatText();
return false;
}
This will add our message to the chat every time we enter a message and press enter.

You will also notice that when you first open the page, the chat is not refreshing itself.  We will create a JavaScript function that is called when the page loads to handle initializing our application.
<body onload="javascript:startChat();">
When the document loads, we start refreshing the chat messages by calling the getChatText() function.
//Function for initializating the page.
function startChat() {
//Set the focus to the Message Box.
document.getElementById('txt_message').focus();
//Start Recieving Messages.
getChatText();
}
Additionaly we set the focus to the message textbox so the user can immediately start typing a message.

One last thing that I will add to the tutorial is the ability to have the chat area auto scroll with the messages.  This is simple little addition that really increases the usablilty of the Chat.  In our handleRecieveChat function, we will add the line:
chat_div.scrollTop = chat_div.scrollHeight;
After we add the chat message to the chat_div.  Now when a new message arrives, and the chat_div grows beyond it's containing size, the new message will be visible without having to scroll.

This concludes the first part of the AJAX driven web chat tutorial.  In the next installment, we will see how to create multiple chat rooms with different user names.  We will also see other ways to extend our chat application to make it more robust and user friendly.

Hopefully this tutorial gave you a good introduction to creating application using AJAX technologies.