I have committed many times to be more active in being a more active “blogger”. Some of my posts have been very successful, like “Fighting Spam With CSS” and “Tweak that Gamma“. Also, with being featured on Elance.com recently about wordpress blogs, I have decided to recommit. My new approach, and hopefully this works, is choosing a topic to cover each week. Each day (M-F) I will demonstrate a small example within that topic, that will hopefully be beneficial to you.
This week is Spry.
You can follow the link to learn more about it, but basically it’s another javascript library created by Adobe. Some things I like about it, is 1. It’s completely free (no donations requested from a large company like Adobe); 2. It’s easy to impliment and use; 3. Their examples are really good and cover a wide variety of topics.
Recently, with a large project I have been working on, Spry has been very important in helping me use AJAX to enhance functionality and user-interaction. Recently, I created the registration pages for this same project. I wanted to make it as simple as possible. So for today, I am going to cover how to use Spry’s updateContent utility, to help me out with user login id’s.
The problem:
Like many sites where a login id is required, it can be frustrating once thousands of users are populating the database, to find a unique login id that hasn’t been taken. I am sure you can share my frustration with trying to create a unique account in Xbox live or yahoo chat. On many websites, the user types in their desire username, selects and confirms their password, and then clicks submit. The form then passes the information to a server-side script which checks the database to see if it’s unique, and then either sends back the form with a very disappointing error, or sends a very gratifying page that says “sexyMomma2007″ is available. When the user id is not unique, it can be frustrating. However, when a user has to continually try new ones and resubmit the form, then wait for a response from the server, that only builds on the frustration… until finally the user snaps and chooses a login that makes no sense and forever will be dissapointing.
The solution:
With this in mind, I thought to myself “Is there anything that can be done. Is there any hope”. Then I remembered the new buzzword “Ajax”, and realized, yes… There is a solution. Why don’t you take a look (I hate it when tutorials only put the finished link at the bottom… if you know enough about how it works just by looking at the code, then copy and paste the freaking code and use it in your own site. If you need more love, keep reading).
The instructions are there, but basically put in a username in the “Create login” box, and then click on the password box. You will then see a response of whether it’s ok or not. Also, you will notice if the username is taken, the “register” button becomes disabled, as another reminder they should try another name to continue. You will be happy to know that only 3 usernames are taken on this example: admin (me), modernblue (me), ferris-bueller (me, I wish). So, get some gratification by typing in your favorite user names and obtaining the best response you’ve had in weeks.
Where does spry come in?
First off, I include the spry script (spryData.js) between the <head> tags. Then, I call sprys “updateContent” function using only one line of code. Let’s look at my full function — read the comments:
var checkLogin = function () {
//get the value of their login name
var login = document.user.login.value;
//check the db to see if its available
window.Spry.Utils.updateContent('response', 'checkLogin.php?login=' + login);
}
The “checkLogin” function is the function I call with the “onblur” handler on my input text field. “onblur” is triggered when your cursor first enters the field, and then is clicked somewhere else (focus->blur). So simply, I get their awesome login name, then via spry, I load my “checkLogin.php” script (which you can see below the example) to see if a username is taken. I then pass the variable into my php script, in this case check an array of usernames (I know many of you are rolling your eyes bc I am using an array, rather than a MySQL “SELECT” statement), and then display the response based on it’s availability. I then call the valid login function, which then checks to see whether the response was available, or taken. Let’s take a look at this function:
//check to see if the username is unique
var validLogin = function () {
//get the class of the response span
var answer = document.getElementById('response').className;
if(answer != "success") {
//change the background of the text box to red
document.getElementById('login').className = 'sorryBg';
//disable the register button
document.user.register.disabled=true;
} else {
//change the background of the text box to green
document.getElementById('login').className = 'successBg';
//enable the register button
document.user.register.disabled=false;
}
}
Simply, this login checks the class name of the returned span I sent from my “checkLogin.php” script. If the class is not “success”, I assign the input box the class of “sorryBg”, which makes the background color of the input box red (international error color), and I also disable the register button for people who don’t notice the obvious red box and red error letters. If the class is “success”, then I assign the input box the class of “successBg”, which makes the background green, as well as enable the register button.
Any other ideas?
Of course with this example I am only touching the surface of using spry within forms. I would suggest using a javascript function to make sure the username is the required length, and has the required characters of for your application. Also, don’t forget everything you do user-side, should be re-validated server-side. I am sure some are rolling their eyes, but when you are doing a site for a client whose users are un-trusting (won’t have javascript enabled) you need to accommodate to them. For that same reason you should also accommodate to users who would always have javascript enabled, and especially want to have a quick and easy process. I would recommend looking at this page as well, to learn about Sprys very cool form validation methods.
What’s up for tomorrow?
I am going to share another example of using Spry.Utils.updateContent to show your users shipping rates based on their zip. I am guessing some of you are already starting to think of how this could be handled. I am also going to include a really simple function for connecting to the UPS api, to get immediate quotes.
If any of you need a little more help explanation, let me know via comments. I will try and help the best I can. And please, remember I left out a lot of things for brevity sake, so please keep comments about validation, compliance, security and politics to yourself.
Every time i come here I am not dissapointed, nice post
This is exactly what I was looking for, thank you very much. But I have a little problem, when I put my name in “Login” textfield it still returns red background and it displays “That username is available! ” but “register” button is disabled. I tried with IE8 and Mozilla 3.5.5.
I also need a little help with retrieving usernames from database. How that part would be handled? I have this part of code
“mysql_select_db($database_local_atp, $local_atp);
$query_korisnici = “SELECT `user` FROM cartkorisnici”;
$korisnici = mysql_query($query_korisnici, $local_atp) or die(mysql_error());
$row_korisnici = mysql_fetch_assoc($korisnici);
$totalRows_korisnici = mysql_num_rows($korisnici);”
I need help with this part ”
$used = array (‘admin’,'patrick’,'modernblue’,'ferris-bueller’);”
Thanks.