Easy Order Selection - rowSelector

The Problem

If you've spent much time at all creating iForms for HEO, you've come across a list of orders that have all kinds of prompts associated with them.  Take meds, for example, you may have a long list of meds, all with options for dose, route, priority, and frequency.  If you're like me, you may have wanted them all aligned nice and neatly.

For me (especially given the restrictions of HEO's formatting, but that's whole other rant), I will generally use a table.

List of Statin Medications, all with their own Dose, Route, and Frequency options

Now, other than using the "grid" formatting that "comes with" the iForms that McKesson provides, I wanted to figure out how to help the customer see which order they were looking at when they were fiddling around with the doses, frequencies, etc.  If you have enough doses, routes, or whatever that all look similar enough, the user may accidentally make their choice on the wrong med.

The Solution

I wanted to come up with a solution that would:

• Help the user to quickly and easily see which order(s) they have selected 
• Help the user to quickly and easily connect the prompts to the associated orderable
• Regardless of whether or not they have already chosen the order
• Allow the user to quickly choose their order without being restricted to clicking the checkbox

With this code, when you "mouseover" a row, it highlights the entire row in blue (or the color of your choice, based on your CSS rules); when you select an order, it highlights the entire row in yellow (again, your choice); and you can click anywhere in the row (with the exception of the other form controls) to select / de-select the orderable.

The Code

/*
* rowSelector - jQuery Based Row Selector for HEO iForms
* http://heo-iforms.blogger.com/
*
* Version: 1.0
* Copyright 2012 Scott Morris - http://heo-iforms.blogger.com/
*
* Dual licensed under MIT or GPLv2 licenses
*   http://en.wikipedia.org/wiki/MIT_License
*   http://en.wikipedia.org/wiki/GNU_General_Public_License
*
*/
 (function( $ ){  
    var methods = {
        init : function(options) {
            // Create some defaults, extending them with any options that were provided
            var settings = $.extend( {
                'hoverClass' : 'rowHover',
                'selectedClass' : 'rowSelected'
            }, options);

            var $this = $(this);
            return this.each(function() {
                $(this).find('tr').addClass('clickable')
                    .hover(function() {
                        $(this).addClass(settings.hoverClass);
                    }, function() {
                        $(this).removeClass(settings.hoverClass);
                    })
                    .bind('click', function() {
                        var $obj = $(this).find('input:radio, input:checkbox').first();
                        if ($obj.attr('type') == 'radio') {
                            $obj.attr('checked',true);
                        } else {
                            var checked = ($obj.attr('checked') !== undefined) ? true : false;
                            $obj.attr('checked',!(checked));
                        }
                        $obj.trigger('update');
                    })
                    .find('input, select').click(function(e) {
                        e.stopPropagation();
                    });
                
                $(this).find('tr input:checkbox, tr input:radio')
                    .bind('click',function() { $(this).trigger('update'); })
                    .bind('update', function () {
                        if ($(this).attr('checked') !== undefined) {
                            $(this).parent().parent().addClass(settings.selectedClass);
                            if ($(this).attr('type') == 'radio') {
                                var rdoName = $(this).attr('name');
                                $('tr input[name="' + rdoName + '"]:radio').not(this).trigger('update');
                            }
                        } else {
                            $(this).parent().parent().removeClass(settings.selectedClass);
                        }
                    });
            });
        },
        destroy : function(options) {
            $(window).unbind('.rowSelector');
        }
    };

    $.fn.rowSelector = function(method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || ! method) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.rowSelector' );
        }    
    };
})( jQuery );

Then you just need to call the function on pageload based on what table(s) you want to affect.

$('table.grid').rowSelector();

There are only a few options you can pass to the function, and they have to do with the name of the classes used for hovering and selecting. If you use a different naming convention and it's shared throughout all of your iForms, I'd suggest just changing the name of the classes in the linked JS file, but if you ever come across a case that you want the classes to be different for a single page (or for a different tables on the same page), you can pass that information to the function:

$('table.grid').rowSelector({ 
    hoverClass:    'myHoverClass', 
    selectedClass: 'mySelectedClass'
});

See For Yourself