I have this ajax chat, i want it to update another php page at the same time it refreshes chat. So somehow I need to to call it without causing errors.
Here is code:
So if anyone can help me out that would be great.
<html>
<head>
<title>Chat</title>
<style type="text/css" media="screen">
.chat_time {
font-style: italic;
color: red;
font-size: 9px;
}
.name_time {
font-style: italic;
color: blue;
font-size: 14px;
}
.message_time {
font-style: oblique;
color: black;
font-family: serif;
font-size: 14px;
}
</style>
<script language="JavaScript" type="text/javascript">
var sendReq = getXmlHttpRequestObject();
var receiveReq = getXmlHttpRequestObject();
var lastMessage = 0;
var mTimer;
//Function for initializating the page.
function startChat() {
//Set the focus to the Message Box.
document.getElementById('txt_message').focus();
//Start Recieving Messages.
getChatText();
}
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
document.getElementById('p_status').innerHTML = 'Status: Cound not create XmlHttpRequest Object. Consider upgrading your browser.';
}
}
//Gets the current messages from the server
function getChatText() {
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
receiveReq.open("GET", 'getChat.php?chat=2&last=' + lastMessage, true);
receiveReq.onreadystatechange = handleReceiveChat;
receiveReq.send(null);
}
}
//Add a message to the chat server.
function sendChatText() {
if(document.getElementById('txt_message').value == '') {
alert("You have not entered a message");
return;
}
if (sendReq.readyState == 4 || sendReq.readyState == 0) {
sendReq.open("POST", 'getChat.php?chat=2&last=' + lastMessage, true);
sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
sendReq.onreadystatechange = handleSendChat;
var param = 'message=' + document.getElementById('txt_message').value;
param += '&name=<? echo $user_info['login']; ?>';
param += '&uid=<? echo $auth;?>';
param += '&chat=2';
sendReq.send(param);
document.getElementById('txt_message').value = '';
}
}
//When our message has been sent, update our page.
function handleSendChat() {
//Clear out the existing timer so we don't have
//multiple timer instances running.
clearInterval(mTimer);
getChatText();
}
//Function for handling the return of chat text
function handleReceiveChat() {
if (receiveReq.readyState == 4) {
var chat_div = document.getElementById('div_chat');
var xmldoc = receiveReq.responseXML;
var message_nodes = xmldoc.getElementsByTagName("message");
var n_messages = message_nodes.length
for (i = 0; i < n_messages; i++) {
var user_node = message_nodes[i].getElementsByTagName("user");
var text_node = message_nodes[i].getElementsByTagName("text");
var time_node = message_nodes[i].getElementsByTagName("time");
chat_div.innerHTML += '<font class="name_time">' + user_node[0].firstChild.nodeValue + ' </font>';
chat_div.innerHTML += '<font class="chat_time">' + time_node[0].firstChild.nodeValue + '</font><br />';
chat_div.innerHTML += '<font class="message_time">' + text_node[0].firstChild.nodeValue + '</font><br />';
chat_div.scrollTop = chat_div.scrollHeight;
lastMessage = (message_nodes[i].getAttribute('id'));
}
mTimer = setTimeout('getChatText();',2000); //Refresh our chat in 2 seconds
}
}
//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 function handles the response after the page has been refreshed.
function handleResetChat() {
document.getElementById('div_chat').innerHTML = '';
getChatText();
}
</script>
</head>
<body onload="javascript:startChat();">
<p id="p_status"></p>
<b>Traffic Chat</b>
<div id="div_chat" style="height: 300px; width: 500px; overflow: auto; background-color: #FFFFFF; border: 1px solid #555555;">
</div>
<form id="frmmain" name="frmmain" onsubmit="return blockSubmit();">
<input type="button" name="btn_get_chat" id="btn_get_chat" value="Refresh Chat" onclick="javascript:getChatText();" /><br />
<input type="text" id="txt_message" name="txt_message" style="width: 447px;" />
<input type="button" name="btn_send_chat" id="btn_send_chat" value="Send" onclick="javascript:sendChatText();" />
</form>
<b></b>
</body>
</html>
