David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞. » AJAX

Create a Twitter AJAX Button with MooTools, jQuery, or Dojo

David Walsh — Wed, 25 Aug 2010 03:28:19 +0000

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.

Note: This tutorial will only display the client side handling of the form submission — NOT any PHP/MySQL/server-side handling of the request.

View MooTools Demo View Dojo Demo View jQuery Demo

The HTML Structure

The HTML for the button is very simple. The structure revolves around a BUTTON element which contains an I element and SPAN element. You’re probably thinking “An I element? WTF.” I know I did. The truth of the matter is that the I element is deprecated and, as far as I’m concerned, and be used for any purpose the developer would like. I’m also sure that Twitter doesn’t mind saving bytes here or there.

The CSS Styles

/* twitter button and its children */
button.btn { 
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	background-attachment:scroll;
	background-color:#ddd;
	background-image:url(http://s.twimg.com/a/1282150308/images/buttons/bg-btn.gif);
	background-position:0 0;
	background-repeat:repeat-x;
	border:1px solid #ddd;
	border-bottom:1px solid #ccc;
	color:#333;
	cursor:pointer;
	font-family:"Lucida Grande",sans-serif;
	font-size:11px;
	line-height:14px;
	padding:4px 8px 5px 8px;
	text-shadow:1px 1px 0 #fff;
	vertical-align:top;
}
button.btn:hover {
	border:1px solid #999;
	border-bottom-color:#888;
	color:#000;
	background-color:#d5d5d5;
	background-position:0 -6px;
}
button.btn:active {
	background-image:none !important;
	text-shadow:none !important;
}
			
button.btn i {
	background-image:url(http://s.twimg.com/a/1282150308/images/sprite-icons.png);
	background-position:-176px -32px;
	background-repeat:no-repeat;
	display:inline-block;
	height:13px;
	margin-right:5px;
	width:15px;
}
button.btn i.active	{ background:url(http://s.twimg.com/a/1282150308/images/spinner.gif); }

/* properties for the element that is generated *after* following */
span.following	{  background:#ffd; padding:5px 10px; }
span.following span { width:10px; height:9px; margin-right:5px; display:inline-block; background:url("http://s.twimg.com/a/1282150308/images/sprite-icons.png") -160px -16px no-repeat; }

Most of the styling for this button goes onto the BUTTON element itself. You’ll notice directives to round the button; leaving the button sharp also please the eye. Through the regular, hover, and active button states, check out how Twitter users the background position and colors to nicely modify the button without the need for additional images. You’ll also notice Twitter uses sprites…as should you.

The MooTools JavaScript

/* with mootools */
window.addEvent('domready',function() {
	/* fetch elements */
	$$('form.follow-form').each(function(form) {
		/* stop form event */
		form.addEvent('submit',function(e) {
			/* stop event */
			if(e) e.stop();
			/* send ajax request */
			var i = form.getElement('i');
			new Request({
				url: 'twitter-follow.php',
				method: 'post',
				data: {
					followID: form.getElement('input').value
				},
				onRequest: function() {
					i.addClass('active');
				},
				onSuccess: function() {
					var button = form.getElement('button');
					button.setStyle('display','none');
					new Element('span',{
						html: 'Following!',
						'class': 'following'
					}).inject(button,'after');
				},
				onComplete: function() {
					i.removeClass('active');
				}
			}).send();
		});
	});
});

The first step is grabbing all of the FORM elements with the follow-form CSS class. Upon form submission, the default submission action is stopped. An AJAX request is fired, using the INPUT element’s ID as the user to follow. When the request is fired, the I element’s background image is set to the spinner. When the request is complete, the button is hidden and a new SPAN element is displayed informing the user that they are now following the given user!

The jQuery JavaScript

// Idiomatic jQuery by Doug Neiner
jQuery(function ($) {
	/* fetch elements and stop form event */
	$("form.follow-form").submit(function (e) {
		/* stop event */
		e.preventDefault();
		/* "on request" */
		$(this).find('i').addClass('active');
		/* send ajax request */
		$.post('twitter-follow.php', {
			followID: $(this).find('input').val()
		}, function () {
			/* find and hide button, create element */
			$(e.currentTarget)
			  .find('button').hide()
			  .after('Following!');
		});
	});
});

The code above is based off of the MooTools code. The workflow is exactly the same.

The Dojo JavaScript

/* when the DOM is ready */
dojo.ready(function() {
	/* fetch elements */
	dojo.query('form.follow-form').forEach(function(form) {
		/* stop form event */
		dojo.connect(form,'onsubmit',function(e) {
			/* stop event */
			dojo.stopEvent(e);
			/* active class */
			dojo.query('i',form).addClass('active');
			/* get button */
			var button = dojo.query('button',form)[0];
			/* ajax request */
			dojo.xhrPost({
				form: form,
				load: function() {
					dojo.style(button,'display','none');
					dojo.create('span',{
						innerHTML: 'Following',
						className: 'following'
					},button,'after');
				}
			});
		});
	});
});

The code above is based off of the MooTools code. The workflow is exactly the same.

View MooTools Demo View Dojo Demo View jQuery Demo

This “Follow” button is only one of many details that Twitter has paid attention to, just to make the user experience on the site better. Take note from the effort put forth by large websites — adding these types of details to your smaller websites can make the user experience much better for YOUR users!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Create a Twitter AJAX Button with MooTools, jQuery, or Dojo

Create a Dynamic Flickr Image Search with the Dojo Toolkit

David Walsh — Tue, 24 Aug 2010 01:46:49 +0000

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.

This post aims to mesh the three collections together. We’ll be creating a tabbed interface for grabbing Flickr images using Dijit’s TabContainer, DojoX’s Flickr data store, and basic Dojo code for event handling and node manipulation.

View Demo

Select a Theme

There are two main steps in adding a theme to the page: importing the theme stylesheet and adding the theme as a class name to the BODY element.

The claro theme is new in Dojo 1.5 and happens to be my favorite.

Import Dojo From CDN, parseOnLoad:true

Pulling from Google’s CDN makes Dojo load lightning-fast. Adding a djConfig attribute with parseOnLoad:true instructs Dojo to scour the page looking for widgets.

Alternatively you could configure Dojo by using the djConfig JavaScript variable:

djConfig = {
	parseOnLoad: true
};

Either way will suffice.

Create the HTML Structure: Tab Container and Search Form

Setting up the form comes first. The form is going to be very simple, containing only a search box and a submit button. Each node (FORM, INPUT, and BUTTON) is converted to its Dijit widget equivalent to provide extra functionality and themed display.

The search box becomes a dijit.form.ValidationTextBox which allows me to require a value and display an error message if no term is provided. I’ve also used the placeholder attribute to display a message in the search box when there is no value. Dojo’s internal awesomeness adds JavaScript support for the same functionality if the user’s browser doesn’t support placeholder yet.

The second piece is placing the TabContainer and its initial content pane in the page. The initial ContentPane content will simply be a “welcome” tab so that there’s always one tab within the container:



	
	
		
		
			
				Welcome to the Flickr Search data store and Tab Container example.  
				Submit your search and watch the tab load!

Future tabs will be closable.

Require Dojo/Dijit/DojoX Dependencies

Before we can create our widgets and use Dojo classes, we need to load them:

/* require necessary classes */
dojo.require('dijit.layout.TabContainer');
dojo.require('dijit.layout.ContentPane');
dojo.require('dijit.form.Button');
dojo.require('dijit.form.Form');
dojo.require('dijit.form.ValidationTextBox');
dojo.require('dojox.data.FlickrStore');
dojo.require('dijit.Tooltip');

Dojo’s internal functionality will also direct dependencies of dependencies to be loaded. If you aren’t familiar with Dojo class loading, be sure to read The Beauty of dojo.require().

Dojo, Dijit, DojoX: Make It Happen

Now that the theme is in place, HTML structure is there, and we’ve required the necessary classes, we can code our application-specific JavaScript. There’s a decent amount of JavaScript need to make this work so let’s break it down.

Start by creating an object which will hold all of our open tabs and an instance of dojox.data.FlickrStore which will be used to query Flickr:

/* settings */
var tabSubjects = {};
var flickrStore = new dojox.data.FlickrStore();

Then collect the form elements as well as the TabContainer:

/* collect proper elements */
var searchForm = dijit.byId('searchForm');
var searchBox = dijit.byId('searchBox');
var searchButton = dijit.byId('searchButton');
var tabContainer = dijit.byId('tabContainer');

Add a “submit” event listener to the TabContainer…

/* connect click event to search */
dojo.connect(searchForm,'onSubmit',function(e) {

…which stops the normal form submission:

//stop!
dojo.stopEvent(e);

…grabs the value of the search box:

//store value - set to lower case to save to caching object
var value = searchBox.get('value').toLowerCase();

If a value is present, make sure there isn’t currently a search tab open for that term. If there is, focus on it. If this is a new search term, direct the dojox.data.FlickrStore instance to search and return images for the given term. Upon search, a new tab for this term is created with a default title and content string, added to the TabContainer, and this new tab is selected:

//if a value exists...
if(value) {
	//if the tab isn't already there...
	if(!tabSubjects[value]) {
		//do the search...
		flickrStore.fetch({
			query: { tags: value },
			onBegin: function() {
				//create the tab
				tabSubjects[value] = new dijit.layout.ContentPane({ 
					title:value, 
					content:'Searching for ' + value + '...', 
					closable:true,
					onClose: function() {
						//remove this from our saved tabs when closed
						tabSubjects[value] = null;
						return true;
					}
				});
				//add to tabcontainer and select
				tabContainer.addChild(tabSubjects[value]);
				tabContainer.selectChild(tabSubjects[value]);
			},

When the search is complete, we clear the contents of the tab’s pane and loop through each returned image, injecting it into the content pane. Lastly, we create a tooltip for the image which displays the image name when the user focuses on the image:

	onComplete: function(items) {
		//if we got items...
		if(items.length) {
			//clear the tab's content'
			tabSubjects[value].set('content','');
			//cycle through each image returned, inject into new tab, add tooltip
			dojo.forEach(items,function(item,i) {
				//create the link's ID for the tooltip
				var id = new Date().getTime() + '_' + i;
				var a = dojo.create('a',{ 
					href: flickrStore.getValue(item,'link'),
					className: 'thumb',
					target: '_blank',
					id:  id,
					innerHTML: ''
				},tabSubjects[value].domNode);
				//tooltip!
				new dijit.Tooltip({ label: flickrStore.getValue(item,'title'), connectId: id });
			});
		}
		else {
			//provide "no images" content
			tabSubjects[value].set('content','There were no images available for this term.');
		}
		//empty the search box
		searchBox.set('value','');
		
	}
});

Here’s the complete JavaScript block for this app:

/* require necessary classes */
dojo.require('dijit.layout.TabContainer');
dojo.require('dijit.layout.ContentPane');
dojo.require('dijit.form.Button');
dojo.require('dijit.form.Form');
dojo.require('dijit.form.ValidationTextBox');
dojo.require('dojox.data.FlickrStore');
dojo.require('dijit.Tooltip');

/* when all classes have loaded... */
dojo.ready(function() {
	
	/* settings */
	var tabSubjects = {};
	var flickrStore = new dojox.data.FlickrStore();
	
	/* collect proper elements */
	var searchForm = dijit.byId('searchForm');
	var searchBox = dijit.byId('searchBox');
	var searchButton = dijit.byId('searchButton');
	var tabContainer = dijit.byId('tabContainer');
	
	/* connect click event to search */
	dojo.connect(searchForm,'onSubmit',function(e) {
		//stop!
		dojo.stopEvent(e);
		//store value
		var value = searchBox.get('value').toLowerCase();
		//if a value exists...
		if(value) {
			//if the tab isn't already there...
			if(!tabSubjects[value]) {
				//do the search...
				flickrStore.fetch({
					query: { tags: value },
					onBegin: function() {
						//create the tab
						tabSubjects[value] = new dijit.layout.ContentPane({ 
							title:value, 
							content:'Searching for ' + value + '...', 
							closable:true,
							onClose: function() {
								//remove this from our saved tabs when closed
								tabSubjects[value] = null;
								return true;
							}
						});
						//add to tabcontainer and select
						tabContainer.addChild(tabSubjects[value]);
						tabContainer.selectChild(tabSubjects[value]);
					},
					onComplete: function(items) {
						//if we got items...
						if(items.length) {
							//clear the tab's content'
							tabSubjects[value].set('content','');
							//cycle through each image returned, inject into new tab, add tooltip
							dojo.forEach(items,function(item,i) {
								//create the link's ID for the tooltip
								var id = new Date().getTime() + '_' + i;
								var a = dojo.create('a',{ 
									href: flickrStore.getValue(item,'link'),
									className: 'thumb',
									target: '_blank',
									id:  id,
									innerHTML: ''
								},tabSubjects[value].domNode);
								//tooltip!
								if(flickrStore.getValue(item,'title')) { new dijit.Tooltip({ label: flickrStore.getValue(item,'title'), connectId: id }); }
							});
						}
						else {
							//provide "no images" content
							tabSubjects[value].set('content','There were no images available for this term.');
						}
						//empty the search box
						searchBox.set('value','');
						
					}
				});
			}
			//if it does exist, focus on it
			else {
				tabContainer.selectChild(tabSubjects[value]);
			}
		}
	});
});

How long would you say this took to write? Half hour? Hour? Three hours? Nope. This mini-application only took me about 15 minutes to write! DojoX also features a class for pulling images from Picasa.

View Demo

Nice, huh? Meshing Dojo, Dijit, and DojoX classes is a breeze thanks to Dojo’s tightly knit class system. I challenge you to create a simple application and see what you can do in an hour. Use Theme Tester as a helper should you need inspiration! And always share what you’ve created when you’re done!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Create a Dynamic Flickr Image Search with the Dojo Toolkit

Implement the Google AJAX Search API

David Walsh — Mon, 02 Aug 2010 14:04:25 +0000

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!

View Demo

Sign Up!

Google’s AJAX Search API requires that you sign up for an API key. Signing up is free and you’ll be done with the process of retrieving a key in a few minutes.

You’ll also need to provide a domain for which they key will work for; one key per domain.

The HTML

You’ll want to use a “real” form so that if the user doesn’t have JavaScript, they’ll get directed to Google for their search. Beyond that, follow the hidden input line to ensure your search will work. You may also note that the search box has autocomplete and placeholder attributes — those are HTML5 functionality, nothing to do with Google’s AJAX Search API.

The CSS

/* results positioning */
#search-results		{ position:absolute; z-index:90; top:40px; right:10px; visibility:hidden; }
/* triangle! */
#search-results-pointer { width:0px; height:0px; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid #eee; margin-left:80%; }
/* content DIV which holds search results! */
#search-results-content { position:relative; padding:20px; background:#fff; border:3px solid #eee; width:380px; min-height:200px; -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) }

The CSS above simply position the elements where I want them per my design. I even used a CSS triangle!

The JavaScript

window.addEvent('domready',function(){

	/* search */
	var searchBox = $('search-box'), searchLoaded=false, searchFn = function() {

		/*
			We're lazyloading all of the search stuff.
			After all, why create elements, add listeners, etc. if the user never gets there?
		*/
		if(!searchLoaded) {
			searchLoaded = true; //set searchLoaded to "true"; no more loading!

			//build elements!
			var container = new Element('div',{ id: 'search-results' }).inject($('search-area'),'after');
			var wrapper = new Element('div',{
				styles: {
					position: 'relative'
				}
			}).inject(container);
			new Element('div',{ id: 'search-results-pointer' }).inject(wrapper);
			var contentContainer = new Element('div',{ id: 'search-results-content' }).inject(wrapper);
			var closer = new Element('a', {
				href: 'javascript:;',
				text: 'Close',
				styles: {
					position: 'absolute', //position the "Close" link
					bottom: 35,
					right: 20
				},
				events: {
					click: function() {
						container.fade(0);
					}
				}
			}).inject(wrapper);

			//google interaction
			var search = new google.search.WebSearch(),
				control = new google.search.SearchControl(),
				options = new google.search.DrawOptions();

			//set google options
			options.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
			options.setInput(searchBox);

			//set search options
			search.setUserDefinedClassSuffix('siteSearch');
			search.setSiteRestriction('davidwalsh.name');
			search.setLinkTarget(google.search.Search.LINK_TARGET_SELF);

			//set search controls
			control.addSearcher(search);
			control.draw(contentContainer,options);
			control.setNoResultsString('No results were found.');

			//add listeners to search box
			searchBox.addEvents({
				keyup: function(e) {
					if(searchBox.value && searchBox.value != searchBox.get('placeholder')) {
						container.fade(0.9);
						control.execute(searchBox.value);
					}
					else {
						container.fade(0);
					}
				}
			});
			searchBox.removeEvent('focus',searchFn);
		}
	};
	searchBox.addEvent('focus',searchFn);
});

There’s a fair amount of JavaScript above so stay with me. The following are the steps for implementing the Google AJAX API:

Create an element to house the results of the search.
Create a “Close” link which will allow the user to close the search results window.
Create our Google-given class instance:
- A Web Search (you can also create Local Search if you’d like…). google.search.WebSearch options. I’ve chosen to add tabs and set the input as my search box.
- A SearchControl instance. google.search.SearchControl options. “siteSearch” is my suffix for results, I’ve restricted my search to the davidwalsh.name domain, and form submission will trigger results to display in the current window (instead of a new window).
- A DrawOptions instance. google.search.DrawOptions options. With my DrawOptions instance, I’ve set search control, set the draw container with the options we’ve created, and I’ve decided to use Google’s default “no results” message

Once the search controls are created, it’s time to attach events to the search box to show and hide the search results container based on the contents of the search box. That’s all!

As you can see, I’ve chosen to use the MooTools (FTW) JavaScript toolkit to create the element that houses the results, the “Close” link, and to bind events to the search box. You could just as easily use Dojo or jQuery for element creation and even handling.

View Demo

In all honesty, I couldn’t believe how easy it was to implement Google AJAX search. It’s an easy want to implement search on your website, especially if you’re currently using WordPress’ search. I recommend taking the time to implement Google’s AJAX Search API — the day it takes you to get it working will save your users hours of pain!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Implement the Google AJAX Search API

AJAX Annoyances to Avoid

David Walsh — Fri, 28 May 2010 13:54:58 +0000

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.

Using AJAX Because You Can

If using AJAX doesn’t improve the user experience, there’s a good chance that using it will cause more harm that good. There are many behaviors and functionalities you’ll need to account for (paging, scroll position, “back button”, etc.) that the browser traditionally handles. Add to that things like browser bookmarking and there’s a good chance that using AJAX may not be the best bet, especially if you don’t want to put in the development and testing time to ensure that your users wont be led down an unreliable path.

Forgetting Scroll Position/Paging

A lot of websites now use a cute paging technique that loads more content once you’ve scrolled down near the bottom of a parent element. That’s great and all but if I click a link, click my browser’s “Back” button, and only the first “page” of content loads, I’ll hunt down the site’s webmaster and shank him. I’d rather wait for a full page load than continually need to scroll to the bottom of an element to get back to where I was.

Providing No “Feedback” Imagery/Message

There’s nothing worse than clicking on a button and …seeing…nothing…happen…Oh, there it is! Communicating effectively with your user is paramount to a good user experience. At least with a new page load the user would see the progress bar light up, the address bar change, and possibly even a different cursor. If you plan on creating an effective AJAX-powered site, use something like Dotter or another visual effect to communicate to the user that something is happening.

Too Many Things Happening at Once

Too frequently do I see AJAX-driven websites that have 100 things happening at once. If there are a hundred things happening at once, how can you effectively communicate that to the user? That’s quite a task. It may be best to try to chunk requests together to better show your users “progress-by-volume.”

Have More?

I know I’m missing a few annoyances — share them! If brave enough, cite websites that are currently making these mistakes!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: AJAX Annoyances to Avoid

Animated AJAX Record Deletion Using Dojo

David Walsh — Tue, 11 May 2010 13:38:18 +0000

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.

View Demo

The PHP – Content & Header

The following snippet goes at the top of the page:

if(isset($_GET['delete'])) {
	$query = 'DELETE FROM my_table WHERE item_id = '.(int)$_GET['delete'];
	$result = mysql_query($query,$link);
}

The following is used to display the records:

$query = 'SELECT * FROM my_table ORDER BY title ASC';
$result = mysql_query($query,$link);
while($row = mysql_fetch_assoc($result)) {
	echo '
				Delete
				',$row['title'],'
			';
}

The Dojo Toolkit JavaScript

dojo.addOnLoad(function() {
	dojo.query('a.delete').connect('onclick',function(e) {
		var a = this;
		dojo.anim(a.parentNode,{
			backgroundColor: '#fb6c6c'
		},300);
		dojo.stopEvent(e);
		dojo.xhr('get',{
			content: {
				ajax: 1
			},
			url: dojo.attr(a,'href'),
			load: function() {
				dojo.anim(a.parentNode,{
					opacity: 0
				},300,null,function() {
					dojo.query(a.parentNode).orphan();
				});
			}
		});
	});
});

For every link, we add a click event that triggers the AJAX request. During the request, we transition the containing element to a red background. When the AJAX request returns a “success” response, we slide the element off of the screen.

View Demo

How would you use this? Share!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Animated AJAX Record Deletion Using Dojo

Using Dotter for Form Submissions

David Walsh — Tue, 27 Apr 2010 12:24:15 +0000

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.

View Demo Get Dotter

The MooTools JavaScript

window.addEvent('domready',function() {
	/* get elements */
	var submit = document.id('submit'), form = document.id('share-comment');
	/* create Dotter instance */
	var dotter = new Dotter(submit,{
		delay: 200, //character delay
		message: 'Submitting',
		property: 'value'
	});
	/* when the form is submitted */
	form.addEvent('submit',function(e) {
		//stop the event
		e.stop();
		//assuming it's a valid post...
		if(validatePost()) {
			//stop / failure action
			var action = function() {
				dotter.stop();
				submit.set('value','Submit');
			};
			//create an AJAX request
			var request = new Request({
				url: form.get('action'),
				method: form.get('method'),
				link: 'ignore',
				//start the Dotter when the request is sent
				onRequest: function() {
					dotter.start();
				},
				//stop it when the AJAX request is successful
				onSuccess: action,
				//stop it when the AJAX request is failure
				onSuccess: action
			}).send(document.id('share-comment').toQueryString());
			//put the form back!
		}
	});
});

When the form is submitted the Dotter instance begins its animation. Once the AJAX request is complete (regardless of success or failure), the Dotter is stopped, changing the button text to its original text.

View Demo Get Dotter

There you have it: a practical, straight-forward usage of MooTools Dotter. Feel free to download Dotter from the Forge and let me know if you have questions or suggestions!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Using Dotter for Form Submissions

Record Text Selections Using MooTools or jQuery AJAX

David Walsh — Tue, 03 Nov 2009 14:16:56 +0000

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.

View MooTools Demo View jQuery Demo

The MooTools JavaScript

window.addEvent('domready',function(){
	//gets the selected text
	var getSelection = function() {
		return $try(
			function() { return window.getSelection(); },
			function() { return document.getSelection(); },
			function() { 
					var selection = document.selection && document.selection.createRange();
					if(selection.text) { return selection.text; }
					return false;
		      }
		) || false;
	};
	//event to listen
	var selectRequest = new Request({
		url: 'ajax-selection-copy.php',
		method: 'post'
	});
	$('content-area').addEvent('mouseup',function(e) {
		var selection = getSelection();
		if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
			selectRequest.send('selection=' + encodeURI(selection));
		}
	});
});

The first step is attempting to grab the selected text during the mouseup within our designated container. If we find a text selection we fire an AJAX request to a PHP script which will save the text selection.

The jQuery JavaScript

/* attempt to find a text selection */
function getSelected() {
	if(window.getSelection) { return window.getSelection(); }
	else if(document.getSelection) { return document.getSelection(); }
	else {
		var selection = document.selection && document.selection.createRange();
		if(selection.text) { return selection.text; }
		return false;
	}
	return false;
}
/* create sniffer */
$(document).ready(function() {
	$('#content-area').mouseup(function() {
		var selection = getSelected();
		if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
			$.ajax({
				type: 'post',
				url: 'ajax-selection-copy.php',
				data: 'selection=' + encodeURI(selection)
			});
		}
	});
});

The MooTools code translated to jQuery.

The PHP

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' && $selection = trim($_POST['selection'])) {
	mysql_query('INSERT INTO text_selections (selection,date_selected) VALUES(\''.mysql_escape_string(stripslashes($selection)).'\',NOW())');
}

The above PHP code is very primitive. Depending on the setup of your system (PHP Framework, security settings, etc.) you will want to implement additional measures to prevent attacks on this script.

View MooTools Demo View jQuery Demo

Recording text selections is a great way to discover what topics and/or terms your audience is interested in. You may also want to provide more information on these terms within posts.

What are your thoughts on this? Do you think this is too much like Spyjax? Perfectly OK?

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Record Text Selections Using MooTools or jQuery AJAX

Form Element AJAX Spinner Attachment Using jQuery

David Walsh — Fri, 16 Oct 2009 12:49:34 +0000

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.

View Demo

The XHTML

Elements with the “ajax” CSS class will be our target.

The jQuery JavaScript

$(document).ready(function() {
	//create image
	$('').css('position','absolute').hide().appendTo('body');
	//for every field change
	$('.ajax').change(function() {
		//get element position
		var position = $(this).offset();
		//position image
		$('#spinner').css({ top: position.top , left: position.left + $(this).width() + 30 }).fadeIn();
		//ajax
		$.post('',{
			ajax:1,
			value: $(this).val()
		},function() {
			$('#spinner').fadeOut();
		});
	});
});

We inject the spinner image into the page and reposition it depending on which field is doing the request. Very simple!

View Demo

Isn’t JavaScript fun? Oh yeah…and it makes the user experience better too.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Form Element AJAX Spinner Attachment Using jQuery

Form Element AJAX Spinner Attachment Using MooTools

David Walsh — Thu, 15 Oct 2009 13:12:02 +0000

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.

View Demo

The XHTML

Add the “ajax” class (or any class for that matter) to the elements you’d like the spinner to display by.

The MooTools JavaScript

window.addEvent('domready',function() {
	//inject image
	var spinner = new Element('img',{
		src: 'move-spinner.gif',
		styles: {
			position:'absolute'
		},
		opacity: 0
	}).inject(document.body);
	//form element events
	$$('.ajax').each(function(el) {
		//get coordinates
		var coords = el.getCoordinates(document.body);
		//ajax request object
		var request = new Request({
			url: '',
			method: 'post',
			onRequest: function() {
				spinner.setStyles({
					left: coords.right + 10,
					top: coords.top + 5
				}).fade('in');
			},
			onComplete: function() {
				spinner.fade('out');
			}
		});
		//change event
		el.addEvent('change',function() {
			//ajax request
			request.send({
				data: {
					ajax: 1,
					value: el.get('value')
				}
			});
		});
	});
});

We first add the spinner image to the document but hide it right away. When any of the form elements with the “ajax” class changes value, we move the spinner image to the right of the element. Then we use Reqeust’s onRequest and onComplete methods to show and hide the spinner. Simple!

View Demo

Look forward to a jQuery version tomorrow.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Form Element AJAX Spinner Attachment Using MooTools

Remotely Download Google AJAX Libraries Using PHP

David Walsh — Wed, 30 Sep 2009 12:25:07 +0000

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.

The PHP

//settings
$dir = 'js-libs/';
$url = 'http://code.google.com/apis/ajaxlibs/documentation/index.html';

//open file
$content = get_content($url);
echo 'Retrieved page from Google.';

//parse
$regex = '/http:\/\/ajax.googleapis.com\/ajax\/libs\/.*.js/isU';

//match?
preg_match_all($regex,$content,$matches);

//make sure there are no repeated files
$js_files = array_unique($matches[0]);

//download every file and save locally
foreach($js_files as $file) {
	//download
	$content = get_content($file);
	//save
	$filename = str_replace(array('http://ajax.googleapis.com/ajax/libs/','/'),array('','-'),$file);
	file_put_contents($dir.$filename,$content);
	//
	echo 'saving ',$file;
}

//function to grab content from a url
function get_content($url) {
	$ch = curl_init();
	curl_setopt($ch,CURLOPT_USERAGENT,'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13');
	curl_setopt($ch,CURLOPT_URL,$url);
	curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
	curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,5);
	$content = curl_exec($ch);
	curl_close($ch);
	return $content;
}

Pow! One quick script to get you all of the popular JavaScript libraries in 10 seconds. You may not know how to use each library but it sure doesn’t hurt to have them around.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Remotely Download Google AJAX Libraries Using PHP