jump to navigation

JavaScript key listener October 27, 2008

Posted by chris in : ajax/dom/javascript , add a comment

Placing a JavaScript key listener in your web application is great way to make your app react like a desktop application. The first thing you need to do is place this code in your body onload event. This will call the returnKey function every time the browser detects a key press.

document.onkeypress = returnKey;

We will listen specifically for key code 13, the return key, where a text node has focus. Next we create a switch statement that looks at the text nodes id. We will put in a case to look for the text node id of search. This will call a getProduct function and also highlight the search field.

	function returnKey(evt)
	{
		var evt  = (evt) ? evt : ((event) ? event : null);
		var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);

		if ((evt.keyCode == 13) && (node.type == "text"))
		{
			switch(node.id)
			{
				case 'search':
					getProduct();
					$('search').select();
					break;
			}
		}
	}

JavaScript snippet for handling EFT check scanners October 17, 2008

Posted by chris in : ajax/dom/javascript , add a comment

This piece of code will separate out the account number and routing number from a scanned check. I yanked this function out of a payment class I wrote for a point of sale web application I recently developed. It’s a mootools class, but the core logic can be pulled out and applied pretty much anywhere.

  1. First pass a string into the function, where the string is the string from the check scan
  2. I immediately validate the information is correct. Scanners will send a series of question marks if the check was scanned in at an odd angle. They are very picky, but I tested many ways of sending the check through and this should catch most scenarios
  3. The routing number is stored between two “T” characters in the string. So I look for the T’s, remove them and store off the routing number
  4. The end of the accounting number has a “U” character immediately after it so and the account number starts immediately after the routing number, so I substring that out
  5. I then do some more error checking. Since both the account and routing number should be numeric I use isNan() to verify this.
  6. The entire snippet is wrapped in a try catch so should anything fail it can be logged and reported to the end user
	setCheckAttributes: function(string){
		try{
			if(string.charAt(0)=='?' || string.charAt(1)=='?' || string.charAt(1)=='?')
			{
				displayMessageWindow('Invalid Check','Please verify the check was scanned properly with the check facing in and the routing/account numers at the bottom','error');
				return false;
			}

			var t1=string.search("T"); // start of routing number indentifier
			string = string.replace("T","");
			var t2=string.search("T"); // end of routing number indentifier, start of account number indentifier

			this.routing = string.substring(t1,t2); // set routing number

			var u=string.lastIndexOf("U"); // end of account number indentifier

			var account = string.substring((t2+1),u);
			var accountArr = account.split(" ");

			this.account = accountArr.join(""); // set account number

			if(isNaN(this.account) || isNaN(this.routing)){
				this.account='';
				this.routing='';
				this.payment_method_id=0;
				this.type='';
				displayMessageWindow('Invalid Check','The system encountered an error reading the check and has invalid (non-numeric) information for either the routing or account number.','error');
				return false;
			}
			return true;
		}
		catch(err){
			 pushToErrorLog('class Payment::setCheckAttributes() ' + err);
			 return false;
		}

To determine when a check has been scanned you can use the code in my post, JavaScript snippet for handling credit card readers.

JavaScript snippet for handling credit card readers October 16, 2008

Posted by chris in : ajax/dom/javascript , add a comment

This JavaScript function will successfully extract a credit card number, name of the card holder, and expiration date from any standard credit card reader. I’ve tested this on numerous card types from American Express to Visa and many in between. This function was originally a method within a MooTools class that I wrote for a web application. So it will look a little strange, but is easily modifiable if you know your way around JavaScript, especially if you have played around with any JavaScript framework. A typical string stored with in the magnetic strip of a credit card will look something like the string below. In this string you can see the card belongs to Jon Fubar, the credit card number is 123401230123012, and the expiration date is 01/09. It is not possible to extract the CVV from this string (good for security purposes).

(more…)

point of sale system – a new addition to my portfolio October 16, 2008

Posted by chris in : rant , add a comment

I’ve added my latest project to my web application portfolio. A full fledged, lightening fast, web based Point of Sale system for brick and mortar retail stores. The system handles the following key elements that a majority of retail outlet stores deal with in day-to-day transactions:

Point of Sale system

The system is completely dynamic utilizing XHR requests (Ajax) to communicate with a remote server. Data is passed using JSON to interact with an Apache web server running PHP. The application makes full use of MooTools for all XHR calls and JavaScript classes. On the server side all code is Object Oriented PHP utilizing extends to simplify classes.

Eh sorry I can’t take much credit for the HTML and CSS work, that was done by graphics/web designer guy.