AJAX Tutorials
Create a Twitter AJAX Button with MooTools, jQuery, or Dojo
There's nothing like a subtle, slick website widget that effectively uses CSS and JavaScript to enhance the user experience. Of course widgets like that take many hours to perfect, but it doesn't take long for that effort to be rewarded with above-average user retention and buzz. One of the widgets I love is Twitter's "Follow" button. Let me show you how you can implement this functionality with three popular JavaScript toolkits: MooTools, jQuery, and Dojo.
Create a Dynamic Flickr Image Search with the Dojo Toolkit
The Dojo Toolkit is a treasure chest of great JavaScript classes. You can find basic JavaScript functionality classes for AJAX, node manipulation, animations, and the like within Dojo. You can find elegant, functional UI widgets like DropDown Menus, tabbed interfaces, and form element replacements within Dijit. In DojoX you can find charting libraries, special data stores, vector graphic helpers, and much more.
Implement the Google AJAX Search API
Let's be honest...WordPress' search functionality isn't great. Let's be more honest...no search functionality is better than Google's. Luckily for us, Google provides an awesome method by which we can use their search for our own site: the Google AJAX Search API. Let me show you how to implement this awesome API within your own website!
AJAX Annoyances to Avoid
The AJAX revolution has completely reinvigorated the web. Browsers are working hard to increase the speed of their JavaScript and rendering engines. Web Developers are working as quickly as possible to push the limits of the browsers even further. Users are feeling more entitled by the user experiences provided by AJAX-heavy websites like Facebook. Before you thrust your website into the world of AJAX, be sure you're doing it for the right reasons, otherwise you may run into the following annoyances.
Animated AJAX Record Deletion Using Dojo
I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with Dojo JavaScript.
Using Dotter for Form Submissions
One of the plugins I'm most proud of is Dotter. Dotter allows you to create the typical "Loading..." text without using animated images. I'm often asked what a sample usage of Dotter would be; form submission create the perfect situation. The following code changes a submit button's text to "Submitting..." (and animated dot patterns) during the submission process, resetting the button text when the AJAX request is complete.
Record Text Selections Using MooTools or jQuery AJAX
One technique I'm seeing more and more these days (CNNSI.com, for example) is AJAX recording of selected text. It makes sense — if you detect users selecting the terms over and over again, you can probably assume your visitors are searching that term on Google, Yahoo, etc. I've duplicated this functionality using my favorite JavaScript library, MooTools, and another JavaScript library, jQuery.
Form Element AJAX Spinner Attachment Using jQuery
Yesterday I showed you how to attach an AJAX spinner next to a form element using my beloved MooTools. Today I'll show you how to implement that same functionality using jQuery.
Form Element AJAX Spinner Attachment Using MooTools
Many times you'll see a form dynamically change available values based on the value of a form field. For example, a "State" field will change based on which Country a user selects. What annoys me about these forms is that they'll often do an AJAX request to grab the states but wont show any indicator to the user that something is happening. We're going to use MooTools to add an AJAX spinner image next to form fields that perform such AJAX requests.
Remotely Download Google AJAX Libraries Using PHP
I don't know how to use all of the JavaScript libraries but perusing their code is interesting. If I'm looking to code something I'll look at how each of the other libraries accomplishes the task. The problem is that you need to go out and download each one. And of course they're all on different development schedules so you'd also need to make sure to grab the latest version of the library. Instead of manually accomplishing that task, I've chosen create a script that does all of that for me.