JSL Demo - Chatter

Implements a very simple chatting application in around 20 lines of code. Don't believe me? Take a look at the code. The JS code that powers this application is just 20 lines(24 to be exact(22 if you don't count the \n's - but I getting off track here)).

The Code...

var last_fetch = ""; // A global variable that holds the last chat status
function send(e) { //Called on a form submit
	JSL.event(e).stop(); // Stops the form submit event
	var msg = $("msg").value;
	if(!msg) return; //If the chat message is empty, don't send it
	$("msg").value = ""; // Clear the chat text box
	
	JSL.ajax("chat.php?action=send&msg="+msg).load(); //Send the chat message to the server - ajax call.
	JSL.dom("display").innerHTML = msg + "<br />" + JSL.dom("display").innerHTML; //Add the newly added message to the screen.
}
function fetch() { // Called every 3 seconds
	JSL.ajax("chat.php?action=fetch").load(function(txt){ //Ajax call that fetches the chat data as plain text.
		if(txt != last_fetch) {
			last_fetch = txt;
			JSL.dom("display").innerHTML = txt.replace(/\n/g, "<br />"); //And shows in on the screen.
		}
	});
}

function init() {
	$("msg").focus();
	
	JSL.dom("chat").on("submit", send); //Attaches the send() to the form 'chat' 's submit event.
	window.setInterval("fetch()", 3000); // Delay 3 seconds
}
JSL.dom(window).load(init); //Calls the init() on page load

See It In Action...

JSL Demo - Chatter

Popular Pages

• Handling Keyboard Shortcuts in JavaScript
  
• UED(Url Encoded Data) - Format for Sending Data to the Server Side
  
• New JavaScript Library
  
• Ajax File Upload
  
• Ajax Data Transfer Methods - XMLHttpRequest Alternatives
  
• Using POST method in XMLHTTPRequest(Ajax)
  
• AHAH(Asynchronous HTML over HTTP)
  
• Hide the Target URL of a Link in Status Bar
  
• Ajax File Upload Response Handling
  
• dump() - Javascript equivalent of PHP's print_r() function
  

OpenJS

• About
• Ajax
• Articles
• Scripts
• Sitemap