A Shiny, AJAX Clean
We are getting ready to begin the major development on the next generation of our website, at least once we get through some of the preplanning stuff. In the hopes that we will be able to present a new site on or around the New Year, we have a lot to do before then. Mostly it means that I have a ton to do in the meantime, although I will probably be recruiting some help for some parts of the new site. One thing that I have been working on while the planning happens is scripting some Ajax interfaces for various things on the site.
For example, we will be sending out a newsletter when we make our transition (did I mention that we are going to be focusing more on electronic delivery in the future?) and we would like for people to be able to sign up easily. Rather than having a page that a user must click to in order to sign up, we are going with a nice, simple signup form that can appear anywhere we want. Don't get me wrong, there will still be a page explaining the newsletter and providing information about it. After all, who would sign up for something without knowing what it is.
However, for those that do, I would prefer that they simply fill out their email address and continue on their way. To get that simplicity I am creating simple Ajax forms to collect the signup information. Once the user clicks "Signup" on the form, they can go about their business while the database is queried and a response is sent all in the background. That would be the "asynchronous" part of Ajax. It's a nice little thing, but here are the issues that need to be addressed when creating an Ajax form.
First, the form needs to be told to run the script. I attach the script that I want to run to the "submit" event of the form. In addition, I also disable the default action of the form (the page that it would load if there were no JavaScript) via JavaScript. This makes it so that if the user does not have JavaScript, the form behaves like every other form and works fine. However, for those that do have JavaScript (99% of web browsers) the JavaScript will take over, essentially "hijacking" the submit event of the form. From there, the script collects the data (email address), then validates it, and finally sends the information to the server and waits for a response.
