corrade-http-templates – Diff between revs 22 and 23

Subversion Repositories:
Rev:
Only display areas with differences – Ignore whitespace
Rev 22 Rev 23
1 <!doctype html> 1 <!doctype html>
2   2  
3 <html lang="en"> 3 <html lang="en">
4 <head> 4 <head>
5 <meta charset="utf-8"> 5 <meta charset="utf-8">
6   6  
7 <title>Corrade Group Chat</title> 7 <title>Corrade Group Chat</title>
8 8
9 <meta name="description" content="Group Chat Relay using Corrade"> 9 <meta name="description" content="Group Chat Relay using Corrade">
10 <meta name="author" content="Wizardry and Steamworks"> 10 <meta name="author" content="Wizardry and Steamworks">
11   11  
12 <link rel="stylesheet" href="css/style.css?v=1.0"> 12 <link rel="stylesheet" href="css/style.css?v=1.1">
13 13
14 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 14 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
15 <script type="text/javascript"> 15 <script type="text/javascript">
16 $(document).ready(function () { 16 $(document).ready(function () {
17 function sendGroupMessage() { 17 function sendGroupMessage() {
18 // Do not send the message if either the name or the message is empty. 18 // Do not send the message if either the name or the message is empty.
19 // This check is performed in the PHP script as well. 19 // This check is performed in the PHP script as well.
20 if($.trim($("#name").val()) == '' || $.trim($('#message').val()) == '') 20 if($.trim($("#name").val()) == '' || $.trim($('#message').val()) == '')
21 return; 21 return;
22 // Hide the controls. 22 // Hide the controls.
23 $("#controls").animate({ opacity: 'hide' }, 'slow'); 23 $("#controls").animate({ opacity: 'hide' }, 'slow');
24 // Make the POST request to the PHP script and pass the values of the fields. 24 // Make the POST request to the PHP script and pass the values of the fields.
25 $.ajax({ 25 $.ajax({
26 type: 'post', 26 type: 'post',
27 url: "sendGroupMessage.php", 27 url: "sendGroupMessage.php",
28 data: { 28 data: {
29 name: $("#name").val(), 29 name: $("#name").val(),
30 message: $("#message").val() 30 message: $("#message").val()
31 } 31 }
32 }).done(function(data) { 32 }).done(function(data) {
33 // If any error occurred, display it. 33 // If any error occurred, display it.
34 if(data) 34 if(data)
35 alert(data); 35 alert(data);
36 // When the data returns, clear the message box and show the controls. 36 // When the data returns, clear the message box and show the controls.
37 $('#message').val(""); 37 $('#message').val("");
38 $("#controls").animate({ opacity: 'show' }, 'slow'); 38 $("#controls").animate({ opacity: 'show' }, 'slow');
39 }); 39 });
40 } 40 }
41 // Polls the chatlog every second for changes. 41 // Polls the chatlog every second for changes.
42 (function retrieveMessages() { 42 (function retrieveMessages() {
43 $.get("chat.log?t=" + Math.random(), function(data) { 43 $.get("chat.log?t=" + Math.random(), function(data) {
44 $("#chat").html(data); 44 $("#chat").html(data);
45 $("#chat").scrollTop($("#chat")[0].scrollHeight); 45 $("#chat").scrollTop($("#chat")[0].scrollHeight);
46 setTimeout(retrieveMessages, 1000); 46 setTimeout(retrieveMessages, 1000);
47 }); 47 });
48 }()); 48 }());
49 // When the send button is pressed, then call the sendGroupMessage function to 49 // When the send button is pressed, then call the sendGroupMessage function to
50 // send the message to the PHP script, which then send the message to Corrade. 50 // send the message to the PHP script, which then send the message to Corrade.
51 $("#send").click(function(e){ 51 $("#send").click(function(e){
52 sendGroupMessage(); 52 sendGroupMessage();
53 }); 53 });
54 // Subscribe to pressing enter with the message input box selected. 54 // Subscribe to pressing enter with the message input box selected.
55 $("#message").keypress(function(e) { 55 $("#message").keypress(function(e) {
56 if (e.which == 13) { 56 if (e.which == 13) {
57 sendGroupMessage(); 57 sendGroupMessage();
58 return false; 58 return false;
59 } 59 }
60 }); 60 });
61 }); 61 });
62 </script> 62 </script>
63 </head> 63 </head>
64   64  
65 <body> 65 <body>
66 <div id="container"> 66 <div id="container">
67 <textarea readonly='readonly' id="chat" rows="12"></textarea><br/> 67 <textarea readonly='readonly' id="chat" rows="12"></textarea><br/>
68 <div id="controls"> 68 <div id="controls">
69 Name: <input type="text" size="8" value="Someone" id="name"></input> 69 Name: <input type="text" size="8" value="Someone" id="name"></input>
70 Message: <input type="text" size="35" id="message"></input> 70 Message: <input type="text" size="35" id="message"></input>
71 <button type="button" id="send">Send</button> 71 <button type="button" id="send">Send</button>
72 </div> 72 </div>
73 </div> 73 </div>
74 </body> 74 </body>
75 </html> 75 </html>
76   76