Viewing Category: jQuery  [clear category selection]

jQuery.data() and integer lists and strings and numbers. Oh my.

The jQuery Data feature is pretty awesome. However, there's a gotcha that has, um, gotten me several times when stuffing an HTML5 data attribute with a list of integers that I expect to parse as an array in my JavaScript. For example, consider the following:

<div class="person" data-id="1" data-badges="5,18,6,4">   <p>     <strong>A</strong>     <a href="">Select</a>   </p> </div>

I might have a bit of JavaScript that grabs the badges data and splits it into an array, like so:

$(".person").data("badges").split(",")

That is all well and good. However, when the person has just one badge, jQuery.data() returns a number, rather than a string. Obviously, there is no split() method on the number object. To protect against that case, I've started using the following defensive coding technique:

($(".person").data("badges") + "").split(",")

Another possibility would be to snag the split() method from the string object and give it the data as its this, as in the following:

"".split.call($(".person").data("badges"), ",")

I've created a code sample on jsFiddle to make this more of a real-world scenario. Player A (id=1) has four badges, and everything works as expected. Player B (id-=2) has just one badge, and the string concatenation trick works to solve the problem of calling split() on a number. Player C (id=3), however, has a problem -- splitting an empty string creates an array with one element of an empty string. We could deal with that by checking the length of the string first, like in this jsFiddle. It's ugly, and there's probably a more elegant solution. Perhaps I will create a jQuery Plugin that would wrap jQuery.data() in some logic that would take care of this attribute checking automatically.

jQuery UI Dialog Widget Screencast

I just uploaded a screencast showing how I use jQuery UI to implement a simple “popup” window that allows the user to verfiy the password of an account in an LDAP server. While working in it, I didn't see many examples showing the best practice for passing data from a link in the page to the dynamically created dialog widget. View the screencast with the following link to Vimeo.

Consider the following link that might exist for each user in a group of records:

<a href="#username:fred" class="verify-password">Verify Password</a>

In the jQuery code executed when the page is loaded, it wires up the click event for the link:

$("a.verify-password").click( function() { var username = this.hash.split(':')[1]; $("#verifyPassword").dialog("open").data("username", username); return false; } );

Notice the call to the jQuery.data() method. This is the connection between the link and the dialog widget created by its click event. Here's the simple container that is wrapped up within the dialog widget:

<div id="verifyPassword"> <form name="passwordForm" onsubmit="return false;"> <input type="password" name="password"/> </form> <p class="result"></p> </div>

To put it all together, here is the code that configures the dialog widget. Notice that the Verify button makes use of the username data.

$("#verifyPassword").dialog({ title: "Verify Password", buttons: { "Verify": function() { $.ajax({ data: { var $v = $("#verifyPassword"); username: $v.data("username"), password: $v.find("input[name='password']").val() }, success: function(data, status) { // Do some interesting things with data } }); }, } });

The actual implementation has a whole lot more detail. I tried to strip out everything that wasn't necessary to communicate the dialog widget usage.

A Short Update

This is a quick post about a project I've been working on, an application to manage scheduled jobs on the server. The system maintains a queue of running jobs, preventing multiple resource intensive jobs from overloading the server. I created a screencast demo and uploaded it to Vimeo. Unfortunately, there is a problem with one of the edit points that causes it to stop playing halfway through. I'll have to fix that when I get back from a short visit to San Francisco. The entire movie can be seen if you download the original file, linked to the bottom of the video details page.

One of the cool artifacts of the work on the job scheduler was a generic bean that uses the onMissingMethod() facility in ColdFusion. The component pretends to have all the getter and setting methods one would expect, given a known set of properties. This reduces the number is silly beans with a whole mess of getters and setters that don't do anything useful.

I've also been working quite a bit with jQuery and jQuery UI -- especially the dialog widget. It really takes the effort out of doing some complicated bits of user interface work.

jQuery Lazy Tree Plugin

I created a screencast showing the use of a jQuery plugin that I wrote to perform lazy loading of hierarchical data. When I was working on the application, I didn't see the information I was looking for, so I decided to put it out there myself. The quality is adequate, but it's only my first screencast published for public use, so I'll get better with practice. I'd appreciate comments on the content, presentation, and production.

I used iShowU to record a 1280x720 portion of my second monitor. That's why you don't see the Mac OS X menubar or the application switcher when I do Command + Tab. The resolution is native for HD DV 720p, which I then edit in Final Cut. This generates gianmormous working files, but doesn't require any rendering on import to the timeline. My Power Mac is pretty old, so doing the compression of the final screencast to MPEG-4 (H.264/AAC) takes a really long time. I've got my eye on a Mac Pro quad core machine to speed this process up. Also, I notice that my mouse pointer is not visible in Eclipse, so it's not visible as I'm moving it around while talking. The final file is almost 33 minutes long and weighs in at 105.4 Mb.

I uploaded the file to Vimeo, which supports HD streaming to a Flash player. You can watch the video there, or download the whole QuickTime movie as LazyTree Demo.

I will be packaging up the source code of the project shortly. I'll post another blog with a link to a zip file and the Subversion repository.