Viewing Category: jQuery
[
clear category selection]
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.
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.
CFML,
jQuery
|
Posted
12/29/08
@ 2:36 AM
by Joseph Lamoree
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.
