• Home
• Development
• Labs

• Contact

BLOGS

• Minnesota Search Sprint
• Search "Happens"
• Mock function testing in Drupal
• Drupal + AJAX, Part 1
• Looking for a new office in Sacramento
• HTTP Auth: Demand Satisfaction
• New website coming soon!
• Remembering Jeanette Symons
• Going paper(less): Web 2.0 Organization For Successful Personal Management
• Four Lines That Should Be In Your Postfix Configuration

Drupal + AJAX, Part 1

by domenic on Sun, 04/20/2008 - 16:10

Some months ago, I discussed multiple values in CCK using AJAX. A few people showed interest, so here's Part 1 of how AJAX can go together with Drupal.

We'll start with a common use case: checking that a username is available when a new user signs up. After you're done with this tutorial, you should be able to give the new user near-instant feedback on whether or not their username is available. I like to start at my desired result and work backwards, so that's what we'll do.

Let's create a module called demo_user.module and begin!

Step 1: Alter the user registration form to include a result field
The desired result here is to show the user whether or not their desired username is available, so let's alter the registration form to give us a div to place our results in.

This might actually be the trickiest part. If you have a custom registration form, you'll need to modify this implementation to suit your particular situation.

Step 2: Write a menu hook
The next thing we want to do is put together the logic that actually accomplishes our task. In this case, our task is to see if a given username is already taken. First, write a menu hook like so:

This callback will take the username we pass in with GET (more on that later) and shoot it over to a function called demo_user_username_check(). (Note: don't forget to change the 'access' key to something appropriate for you!)

Step 3: Write some logic to compare the requested user name to what's already in the database.
We can check to see if the requested username is already taken with a simple sql query:
SELECT name FROM users WHERE name = $requested_name
(Note: if your users table is case-sensitive (this is rare), you might want to change the query to a LIKE)
This function takes the result of the check, and generates the appropriate user-facing response. I've used two graphics here, cross.gif for a failure and check.gif for success:

Notice that even though we're throwing user-generated strings into a sql query (a potentially dangerous operation), db_query() automatically escapes the string with db_escape_string() via _db_query_callback().

STEP 4: Wire the callback into JavaScript
Now let's write a JavaScript function that will handle passing the requested username to our callback. This is how we can get the asynchronous request to work. I like to have a little spinner graphic to show that the check is processing, so I stuck a graphic called spinner.gif in /sites/all/themes/mysite/images/. Now, using the magic of JQuery:

Stick this little function into a .js file that gets loaded on your site -- either on the registration page only, or sitewide, whatever... just be sure it's there!

STEP 5: Wire the JavaScript function into the Username field on the registration page
Let's go back to our hook_form_alter() implementation and let the form field know that we should fire the username check when the user enters a name and tabs/clicks out of the field

STEP 6: Theming
You'll want to theme this all to be appropriate to your site. I don't have any magic sauce for you on this one, but it should be a straightforward task.

Grats, you've implemented a rad-looking ajax username checker!

Tags: AJAXd5Drupalformshow-tojavascriptjquerytutorialvalidation

domenic's blog