Creative Juices Bo. Co.

A Fun Bug Hunt with jQuery UI and My JavaScript Libraries

As I was trying to wrap up a client's website this morning, I started getting some weird errors that took me the better part of the day to figure out. It all started when I began working on their contact <form>. As I began bulding out the validation checks, I noticed my nice jQuery UI dialog box was not triggering. I pulled up the console and saw the following errors...

Safar: TypeError: 'undefined' is not an object (evaluating 'this._handles.mouseover')
FireFox: this._handles is undefined

Not very helpful. And as you may know from your own experience, anytime you see generic messages like these, be prepared to scan through a lot of code and have some coffee handy.

After playing around with my javascript load order, removing various bits of code and reloading the browser window about a million times, I finally tracked down the offending code. All my sites have a utility script that I load that includes common javascript prototypes and jQuery plug-ins. One of the plug-ins I have included is a simple function that prevents selection of an object called disableSelection written by Aleem Bawany.

/*
 $('#object').disableSelection();
 prevent object from being highlighted or selected
 author: aleem bawany
 http://aleembawany.com/2009/01/20/disable-selction-on-menu-items-with-this-jquery-extension/
*/
(function ($) {
    "use strict";
    $.fn.extend({
        disableSelection: function () {
            this.each(function () {
                this.onselectstart = function () {
                    return false;
                };
                this.unselectable = "on";
                $(this).css('-moz-user-select', 'none');
            });
        }
    });
}(jQuery));

Well, apparently jQuery UI has it's own function with the same name. Taking a look at the code (Version 1.8.14 as of this writing), we can see theirs on line 120...

disableSelection: function() {
    return this.bind( ( $.support.selectstart ? "selectstart" : "mousedown" ) +
        ".ui-disableSelection", function( event ) {
            event.preventDefault();
        });
}

By the looks of it, it seems to perform the same functionality, but I really didn't have time to play around with it. I have a website to wrap up. So, for a simple-quick fix, I just renamed Aleem's function disableSelect. Problem solved. Hope this helps everyone else.

Question: How come these debuggers can't inform you of duplicate function names? Seems this would resolve about a third of my debugging problems.