corrade-http-templates – Rev 4
?pathlinks?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Corrade Group Chat</title>
<meta name="description" content="Group Chat Relay using Corrade">
<meta name="author" content="Wizardry and Steamworks">
<link rel="stylesheet" href="css/style.css?v=1.0">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function sendGroupMessage() {
// Do not send the message if either the name or the message is empty.
// This check is performed in the PHP script as well.
if($.trim($("#name").val()) == '' || $.trim($('#message').val()) == '')
return;
// Hide the controls.
$("#controls").animate({ opacity: 'hide' }, 'slow');
// Make the POST request to the PHP script and pass the values of the fields.
$.ajax({
type: 'post',
url: "sendGroupMessage.php",
data: {
name: $("#name").val(),
message: $("#message").val()
}
}).done(function(data) {
// If any error occurred, display it.
if(data)
alert(data);
// When the data returns, clear the message box and show the controls.
$('#message').val("");
$("#controls").animate({ opacity: 'show' }, 'slow');
});
}
// Polls the chatlog every second for changes.
setInterval(function () {
$.get("chat.log?t=" + Math.random(), function(data) {
$("#chat").html(data);
});
$("#chat").animate({
scrollTop:$("#chat")[0].scrollHeight - $("#chat").height()
},1000);
}, 1000);
// When the send button is pressed, then call the sendGroupMessage function to
// send the message to the PHP script, which then send the message to Corrade.
$("#send").click(function(e){
sendGroupMessage();
});
// Subscribe to pressing enter with the message input box selected.
$("#message").keypress(function(e) {
if (e.which == 13) {
sendGroupMessage();
return false;
}
});
});
</script>
</head>
<body>
<div id="container">
<textarea id="chat" rows="12"></textarea><br/>
<div id="controls">
Name: <input type="text" size="8" value="Someone" id="name"></input>
Message: <input type="text" size="35" id="message"></input>
<button type="button" id="send">Send</button>
</div>
</div>
</body>
</html>