My first usage of jQuery

As I’ve gotten back into more hardcore development on a project, I decided to finally take jQuery for a spin. I know, this confession makes me look like I’ve been programming in the early 2000s, but at least I’ve arrived in current times now.

The task: hidden links that appear on hover

In a user management system I’ve been developing, I wanted to mimic a certain behavior in WordPress. Basically, when you’re hover over a record in an HTML table, WordPress will reveal Edit, Delete, etc. links. Then when you mouse out of that table row, the links go away.

As a final note, the links also need to be invisible on page load.

My first attempt at the JavaScript

A couple months ago, I wrote this script in plain-vanilla JavaScript, which mainly got the job done. Let’s not look too hard at this other than to see how verbose it is.

// UsersAndGroups object creates namespace to work in
Editable = new Object();
 
// Initialize interface
Editable.initInterface = function() {
    // Hide all util links
    Editable.hideUtilLinks();
}
 
// Hides edit and delete links until hover
Editable.hideUtilLinks = function() {
    var children = document.getElementsByClassName('util-links');
    var i = 0;
    // Hide all group util links
    for(i = 0; i < children.length; i++) {
        children[i].className = 'util-links invisible-with-javascript';
    }
}
 
// Shows edit and delete links on hover
Editable.showUtilLinks = function() {
    var utilLinks = this.getElementsByClassName('util-links');
    var i = 0;
    for(i = 0; i < utilLinks.length; i++) {
        utilLinks[i].className = 'util-links';
    }
}
 
// Add hover and mouseout events for table rows
Editable.initUtilLinkBehavior = function() {
    var tables = document.getElementsByClassName('editable');
    var i = 0;
    var children = null;
    for(i = 0; i < tables.length; i++) {
        children = tables[i].getElementsByTagName('tr');
        Editable.setChildrenLinkBehavior(children);
    }
}
 
Editable.setChildrenLinkBehavior = function(children) {
    for(i = 0; i < children.length; i++) {
        children[i].onmouseover = Editable.showUtilLinks;
        children[i].onmouseout = Editable.hideUtilLinks;
    }
}
 
// Queues functions to load during window.onload event
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
 
// Add interface initialization to window.onload event
addLoadEvent(Editable.initInterface);
addLoadEvent(Editable.initUtilLinkBehavior);

This also uses a custom function called addLoadEvent() that adds an event to window.onload. This tended to be problematic in my application because there often was a slight “flicker” when you first loaded the page, where you could see all of the Edit/Delete links for a split second before the JavaScript fired and hid them.

Doing it with jQuery

When a coworker demoed some of his jQuery work to me and some colleagues, I felt a little more comfortable giving jQuery a try. It does look a little cryptic, so having someone explain some of it does help. Hopefully I can help you overcome any fears that you may have a little with the rest of this post.

Getting rid of the window.onload flicker problem

So the first way that I benefited from jQuery was by not needing to rely on window.onload.

jQuery provides a function to the document object called ready(), which basically helps you to load events as soon as the page is ready for them. This eliminates that flicker problem that I described before.

Here’s the gist:

$(document).ready(function(){
    // Put events that you want to load when the page first loads here
});

To reiterate, the $() function is used here to load the document object, which we then call the ready() function on. We pass it a custom function where we can define whatever we want.

Adding behavior to elements

Basically, you use jQuery’s infamous dollar-sign function, $(), to select element(s) on the page by element name (like li, a, ul, etc.) or any CSS selector, be it an id or class. Then you can chain any number of function calls to that to manipulate behavior.

So here’s what I’d do to add a class called hide-with-javascript to all elements with a class of util-links:

$(".util-links").addClass("invisible-with-javascript");

Putting it all together

The most remarkable thing is how this script does the exact same thing that my script does above with so much less code. It’s like the ColdFusion of JavaScript.

Here is the complete replacement script:

// Interface initialization
$(document).ready(function(){
    // Hide all util links
    $(".util-links").addClass("invisible-with-javascript");
    // Add hover-show, hover-out-hide
    $(".editable tbody tr").hover(
        function() {
            $(this).find(".util-links").removeClass("invisible-with-javascript");
        },
        function() {
            $(this).find(".util-links").addClass("invisible-with-javascript");
        }
    );
});

The jQuery hover() event takes 2 parameters: what to do on hover and what to do when your mouse leaves the hover state. In this case, we pass it 2 quick user defined functions inline.

I was impressed at how quick I was able to pick this up. It took me about a half hour to learn the applicable parts of the API and to get it implemented.

I’m looking forward to learning more about jQuery as my project calls for it. I’m sure that the AJAXy stuff that it provides will be pretty nifty and fast.

Technorati Tags: ccm, chris peters, clear crystal media, html, javascript, jQuery, polymorphism, Programming, web development

This entry is filed under jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.