robertz/gist:39a144fee330cd5c491f

## gistfile1.cfm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple Chat</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>
<div id="messageContainer" style="display: none;">
 <div id="chatDiv" style="width: 500px; height: 300px; border: 1px solid gray; overflow: auto;"></div>
 <br />
 <input id="message" type="text" style="width: 450px;" />
 <input type="button" id="send" value="Send" />
</div>

<div id="nameContainer" style="display: none;">
 <input id="userName" type="text" />
 <input type="button" id="setName" value="Set Name" />
</div>

<script type="text/javascript">
 var userName = '';
 var currID = 0;
 var nl = '<br />';
 var refreshTimer;

 $(document).ready(function(){
  $get = $('#getMsgs');
  $win = $('#chatDiv');
  $msg = $('#message');
  $send = $('#send');
  if(userName == ''){
   $('#nameContainer').show();
  }
  else{
   $('#messageContainer').show();
  }
  $send.click(function(){
   postMessage();
  });
  $('#setName').click(function(){
   if( $('#userName').val().length){
    userName = $('#userName').val();
    postNotice ( userName + ' has entered chat');
    $('#nameContainer').hide();
    $('#messageContainer').show();
    getMessages();
   }
   else{
    alert('For real?!? Nah, you\'re kidding.  Enter a name.');
   }
  });
 });

 function postMessage(){
  $.ajax({
   url		: 'ajaxProxy.cfc',
   cache: false,
   data		: {
    method	: 'postMessage',
   	userName: userName,
   	message : $msg.val()
   },
   success	: function(data){
   	if(data.svrStatus == "0"){
   	 getMessages();
   	}
   	else{
   	 $win.append('Error posting message!');
   	}
   },
   error	: function(){
    $win.append('Error connecting to remote CFC');
   }
  });
  $msg.val('');
 }

 function postNotice(msg){
  $.ajax({
   url		: 'ajaxProxy.cfc',
   cache: false,
   data		: {
    method	: 'postMessage',
   	userName: '*** ',
   	message : msg
   }
  });
 }

 function getMessages(){
  $.ajax({
   url		: 'ajaxProxy.cfc',
   cache: false,
   data		: {
    method	: 'getMessages',
   	startID	: currID
   },
   success	: function(data){
   	var out = '';
   	if(data.svrStatus == '0' && data.messages.length){
   	 for(i=0; i < data.messages.length; i++){
   	  if(data.messages[i].msgid > currID){
   	   out = '<strong>' + data.messages[i].userid + '</strong> : ';
   	   out += data.messages[i].message + nl;
   	   $win.append(out);
   	  }
   	 }
   	 currID = data.lastid;
   	 setScroll();
   	}
   },
   error	: function(){
    $win.append('Error connecting to remote CFC');
	setScroll();
   }
  });
  clearTimeout(refreshTimer);
  refreshTimer = window.setTimeout("getMessages()", 5000);
 }

 function setScroll(){
  $('#chatDiv').attr('scrollTop', $('#chatDiv').attr('scrollHeight'));
 }
</script>

</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Simple Chat</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	</head>

	<body>
	<div id="messageContainer" style="display: none;">
	<div id="chatDiv" style="width: 500px; height: 300px; border: 1px solid gray; overflow: auto;"></div>
	<br />
	<input id="message" type="text" style="width: 450px;" />
	<input type="button" id="send" value="Send" />
	</div>

	<div id="nameContainer" style="display: none;">
	<input id="userName" type="text" />
	<input type="button" id="setName" value="Set Name" />
	</div>

	<script type="text/javascript">
	var userName = '';
	var currID = 0;
	var nl = '<br />';
	var refreshTimer;

	$(document).ready(function(){
	$get = $('#getMsgs');
	$win = $('#chatDiv');
	$msg = $('#message');
	$send = $('#send');
	if(userName == ''){
	$('#nameContainer').show();
	}
	else{
	$('#messageContainer').show();
	}
	$send.click(function(){
	postMessage();
	});
	$('#setName').click(function(){
	if( $('#userName').val().length){
	userName = $('#userName').val();
	postNotice ( userName + ' has entered chat');
	$('#nameContainer').hide();
	$('#messageContainer').show();
	getMessages();
	}
	else{
	alert('For real?!? Nah, you\'re kidding. Enter a name.');
	}
	});
	});

	function postMessage(){
	$.ajax({
	url : 'ajaxProxy.cfc',
	cache: false,
	data : {
	method : 'postMessage',
	userName: userName,
	message : $msg.val()
	},
	success : function(data){
	if(data.svrStatus == "0"){
	getMessages();
	}
	else{
	$win.append('Error posting message!');
	}
	},
	error : function(){
	$win.append('Error connecting to remote CFC');
	}
	});
	$msg.val('');
	}

	function postNotice(msg){
	$.ajax({
	url : 'ajaxProxy.cfc',
	cache: false,
	data : {
	method : 'postMessage',
	userName: '*** ',
	message : msg
	}
	});
	}

	function getMessages(){
	$.ajax({
	url : 'ajaxProxy.cfc',
	cache: false,
	data : {
	method : 'getMessages',
	startID : currID
	},
	success : function(data){
	var out = '';
	if(data.svrStatus == '0' && data.messages.length){
	for(i=0; i < data.messages.length; i++){
	if(data.messages[i].msgid > currID){
	out = '<strong>' + data.messages[i].userid + '</strong> : ';
	out += data.messages[i].message + nl;
	$win.append(out);
	}
	}
	currID = data.lastid;
	setScroll();
	}
	},
	error : function(){
	$win.append('Error connecting to remote CFC');
	setScroll();
	}
	});
	clearTimeout(refreshTimer);
	refreshTimer = window.setTimeout("getMessages()", 5000);
	}

	function setScroll(){
	$('#chatDiv').attr('scrollTop', $('#chatDiv').attr('scrollHeight'));
	}
	</script>

	</body>
	</html>