MooTools Table Sorter version 0.9.5 October 13, 2009
Posted by chris in : ajax/dom/javascript , add a commentI’ve added some additional features to TableSorter (originally featured here). I fixed some bugs in the removeParameter function, added a removeAllParameter function, and added a reloadView function. The new version has nicer default CSS and provides you with a pretty default table reload feature.
Check out the demo page. Post any questions here please.
best way to load your JavaScript July 30, 2009
Posted by chris in : ajax/dom/javascript , add a commentInteresting article over at Ajaxian on loading your javascript code. I’m not sure this is the best way in all cases, but when you’re coding in a world of frameworks, multiple js files, wysiwyg editors, and framework plugins and widgets it definitely makes sense in many circumstances.
new TableSorter mootools widget for sorting tables July 9, 2009
Posted by chris in : ajax/dom/javascript , add a commentPlease see the version 0.9.5 blog post
(more…)
mootools framework javascript key listener December 12, 2008
Posted by chris in : ajax/dom/javascript , 1 comment so farExpanding off this article on JavaScript key listeners I’ll be showing you how to create a key listener in mootools 1.2 today. You will need to use mootools event functionality for this.
window.addEvent('domready', function() {
MochaUI.Modal = new MochaUI.Modal();
$('last_name').addEvent('keydown',function(event){
if(event.key=='enter'){
searchCustomer();
}
});
});
In this example we add an event to the $(‘last_name’) element and tell mootools we want the framework too look for all keydown events on this element. If a keydown event occurs using the enter key we execute the searchCustomer function. Be sure to iniate this on dom ready or whenever the element you are adding the event to is loaded. On DOM ready simply means when the page is completed loading much like body onload. Key press events are a great way to minimize the amount of clicks in your user interface. Many studies show that using the keyboard is up to three times faster than using a mouse!
adding events to elements on and after load in mootools December 10, 2008
Posted by chris in : ajax/dom/javascript , add a commentAdvantages of using MooTools addEvent functionality over native JavaScript events
So why use MooTools (or other frameworks) addEvent functionality over an onclick or onblur? For one you are leveraging a framework which has been tested and is widely used so you are minimizing bugs. It also helps separate code from layout much like moving CSS into a stylesheet separates layout and style from the content. Using a frameworks addEvent also looks a lot cleaner than having a bunch of onclicks in the body of your HTML.
Example of adding events to elements on page load using MooTools :
window.addEvent('domready', function() {
if($('element_id'))
{
$('element').addEvent('click',function(event){
executeSearchFunction();
});
}
});
In this example we tell MooTools we want to add an event to the window when the Document Object Model (DOM) is ready, meaning once it is done loading. This ensure that every element defined in your HTML files has loaded before applying events to them. Next we check to see that element_id exists. If it does, which it should, then we specify that we want to add an event of the click type. Then we tell MooTools what code to execute when this event occurs. In this case we want to call a function named executeSearchFunction. This process is very similar for frameworks such as JQuery.
Adding events to elements that do not exist yet:
As of this writing I am not aware of a way to do this without throwing a javascript error, and no, putting the code into a try catch statement is not a solution. Instead when the element is loaded, typically through an XHR aka Ajax request, call a function that adds the events to the newly created elements:
function loadTableEvents()
{
$('dgth_name').addEvent('click',function(event){
alert(1);
});
}
enhancing the user interface using javascript focus and select December 2, 2008
Posted by chris in : ajax/dom/javascript , add a commentI’ll be doing a series on enhancing the user experience with JavaScript. Today I want to write about two simple methods that you can implement to enhance the user interface and save the end-user time by reducing the total mouse movements and key strokes to accomplish a task.
As a web developer I’ve written more point of sale and CRM phone order type applications then any developer should have too. My pain is your gain. My favorite use of the javascript focus and select methods is for product searches done via XHR ajax requests. This involves the user typing in a text box, pressing the return key, and product list being loaded via XHR ajax into a div element on the page.
You can enhance the user experience by immediately refocusing the text cursor to that search box and highlighting the text within that box. Here’s how…
MooTools example
$('search').focus();
$('search').select();
JavaScript example
document.getElementById('search').focus();
document.getElementById('search').select();
Should the user have typed in an incorrect search phrase or decided that the list of products returned is not what they are looking for, rather than having to backspace through the entire string, they can just start typing again. The use of focus and select will automatically delete what ever was in the search box. The focus and select methods are well known by most web developers, but are under used. This is an easy solution to implement and one that, when used correctly, will save the user a few seconds per operation. Hopefully the use of focus and select will make your next web application flow intuitively while enhancing the user interface and experience.
whats new with mocha ui 0.95 November 25, 2008
Posted by chris in : ajax/dom/javascript , 3commentsGreg Houston has done a great job with the Mocha UI plugin for MooTools. I started using Mocha UI when it was on version 0.8 which was based off MooTools version 1.1. The latest release is based on MooTools 1.2 which is a much more solid and cleaner looking release. Mocha UI followed suite getting rid of a few minor bugs, improving the plugins modal, and adding some nice features including workspace.
I’ve been working on updating existing web applications based on Mocha UI 0.8 and MooTools 1.1 over to the latest versions and the process has been pretty painless. I’ll post another blog on the workspace later when I have time for more web development. In the meantime here’s how to use the basic Mocha UI functionality:
adding an event to a cell using insertCell November 18, 2008
Posted by chris in : ajax/dom/javascript , add a comment
var row = $(element).insertRow(1);
var qty = row.insertCell(1);
qty.innerHTML = productArr[i].qty;
qty.id='qty_'+productArr[i].service_id;
qty.addEvent("click",function() {mod(this) });
You actually have to nest your function call inside of function(){} and especially if you want to pass additional parameters into the function.
JavaScript key listener October 27, 2008
Posted by chris in : ajax/dom/javascript , add a commentPlacing 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 commentThis 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.
- First pass a string into the function, where the string is the string from the check scan
- 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
- 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
- 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
- I then do some more error checking. Since both the account and routing number should be numeric I use isNan() to verify this.
- 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.