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.