Archive

Posts Tagged ‘jquery’

jQuery: Function to auto-capitalize on ‘keyup’ event

November 16, 2010 Comments off

While putting the finishing touches on a view today, the customer asked if we could force the user’s CAPS LOCK on for a case-specific field. Well, no, not necessarily, but we could caps the characters as they go in.

This should be easy enough, right?  Right!

The function:

jQuery.fn.autoCap = function () {
    $(this).each(function () {
        $(this).bind('keyup', function () {
            $(this).val($(this).val().toUpperCase());
        });
    });
}

Usage:

$("#address-state").autoCap();

It’s easy enough to bind to the event and fire off toUpperCase(). There may be a more optimal way, but this seems to fit the bill and profiled well.

Is there a better way? 🙂

Categories: JavaScript, jquery Tags: ,

TableSorter – Creating a Custom ‘TimeSpan’ Parser

October 22, 2010 Comments off

Activities ordered incorrectly by string comparison.In an application we’re working on, I needed a way to sort a string-based time span returned by my view. The problem was separating it out so that AMs came before PMs.

tablesorter allows adding custom parsers to columns. Along with a simple regular expression, the parser can swap the time format around (AM 10:30 rather than 10:30 AM) and sort accordingly.

The custom parser code:

 
$.tablesorter.addParser({ 
    id: 'timeSpan', 
    is: function (s) { return false; }, 
    format: function (s) { 
        var re = /([0-2]?[0-9]:[0-5][0-9])|(AM|PM)/; 
        var matches = re.exec(s); 
        return matches[0,1] + " " + matches[0,0]; 
    }, 
    type: 'numeric' }); 

Adding the parser into TableSorter:

$('#my-table').tablesorter({ 
    sortList: [[1, 0], [0, 0]], 
    headers: { 
        0: { sorter: 'timeSpan' }, 
        1: { sorter: 'dayOfWeek' }, 
        6: { sorter: false } 
    }, 
    widgets: ['zebra'] 
}); 

Now, everything looks like it should:

Activities ordered correctly by start time.

Categories: JavaScript, MVC Tags: , ,