Polymorphism » jQuery

Wheels is only a hammer

Chris Peters — Thu, 08 Oct 2009 10:49:23 +0000

My posting this is a seriously delayed reaction. But I must admit that I was using Wheels as a hammer and trying to treat a problem like a nail when I wrote about creating a Wheels partial for setting form focus.

Stephen came up with a much nicer jQuery-only solution for setting form focus:

$(document).ready(function(){
    $(”.focus”).focus();
});

So now you can set form focus on load by setting that element’s class to focus. No need to create a Wheels partial and set a variable in your CFML.

In my newbness, I wasn’t thinking that you could have that $(".focus") hanging there without it applying to something on every page. Now I am schooled.

Thanks Stephen!

Technorati Tags: cfml, cfwheels, ColdFusion, coldfusion on wheels, html, javascript, jQuery

Wheels + jQuery partial for setting form focus

Chris Peters — Wed, 26 Aug 2009 01:33:30 +0000

Update: I definitely recommend reading through this, but I was a little flawed in my implementation, as Stephen pointed out in the comments. Read my follow-up for more details.

You’ve seen it before: you get to a login screen, and the cursor automatically jumps to the username box so you can just start typing. It’s very convenient.

But developers seem to screw this up regularly. I’ve seen it implemented so poorly that it becomes highly unusable and opens potential security problems.

On my bank’s website, for example, the focus will jump to the username field if you’ve started typing the password before the page has fully loaded. (Sometimes the home page will load slowly, which happens from time to time, you know?) This causes me to expose part of my password to anyone who may be looking over my shoulder!

jQuery to the rescue

As I pointed out in my post about my first learnings of jQuery, the framework provides a method called ready(), which basically helps you to load events as soon as the page is ready for them.

So we can write this simple jQuery code:

$(document).ready(function(){
    $("#my-form-element").focus();
});

This causes focus to jump to the form element with an id of my-form-element on page load.

This won’t cause cursor-jumping mishaps if the user starts typing before the page is ready. (Well, because the page will be ready before the user starts typing. Trippy…)

Making this reusable in ColdFusion on Wheels

I have a couple layouts in my current Wheels application that could use this functionality. So I created this partial that can be included in both layouts via includePartial().

This is the partial at views/_layout_focus.cfm:

<cfsetting enablecfoutputonly="true">
 
<cfparam name="arguments.focus" type="string" default="">
 
<cfif Len(arguments.focus)>
    <cfoutput>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#arguments.focus#").focus();
            });
        script>
    cfoutput>
cfif>
 
<cfsetting enablecfoutputonly="false">

This allows me to put this line in the section of my layout files:


#includePartial(name="/layout_focus", focus=layout.focus)#

Now whenever one of my views need to put focus on a particular form input, I can add this call to the view file:

<cfset layout.focus = "##my-form-element">

Pretty flexible and available whenever it’s needed.

Most of the time, the view template will set layout.focus, but it’s also available when the controller needs to do the thinking. Sometimes the controller may need to make a decision like putting focus on the username field vs. the password field, for example. Maybe the username field is already filled in by a cookie or previous user input.

I hope this helps you better understand some of these jQuery and Wheels concepts. I’m trying to think of interesting real-world examples of where I’ve started to use this new stuff. I’ll keep trying until you guys start showering me with praise in the comments.

Technorati Tags: ccm, cfwheels, chris peters, clear crystal media, ColdFusion, coldfusion on wheels, jQuery, polymorphism, web development

My first usage of jQuery

Chris Peters — Tue, 18 Aug 2009 23:40:39 +0000

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 &lt; 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 &lt; 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 &lt; tables.length; i++) {
        children = tables[i].getElementsByTagName('tr');
        Editable.setChildrenLinkBehavior(children);
    }
}
 
Editable.setChildrenLinkBehavior = function(children) {
    for(i = 0; i &lt; 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