Archive for the 'AJAX / JavaScript' Category

ColdFusion 8 auto-suggest shows through other form fields

Wednesday, January 30th, 2008

I was creating a form the other day that had 3 form fields, layed out vertically on top of one another. I switched the first field to be a cfinput, so I could use the autosuggest feature:

cfinput example 1
(more…)

My GreaseMonkey Script: craigslist spam buttons

Thursday, February 8th, 2007

Last weekend I wrote my first GreaseMonkey script. If you are unfamiliar with GreaseMonkey, its a FireFox extension that lets you run specific JavaScripts on specifc webpages. This is incredibly cool, you can basically bend websites to whatever you want. Everything from changing the look and feel to adding new functionality. GreaseMonkey puts you back in control of your browsing experience. A neat example is the GM script that, when you are browsing Amazon, will put a link to the book at your local library and indicate if its available there.

The GreaseMonkey script I wrote works with Craigslist.org. Craigslist is a popular free classifieds site. Craigslist’s posts are not moderated, so anyone can post an ad. That includes spammers. Craigslist spam is mostly controlled by craigslist users themselves. See an ad thats spam? Click the spam button. If enough people mark it as such, it automatically gets taken down. I really like CL, so I do my part by flagging any spam I see. To do this you must click on the item title from the list, then click the spam button on the detailed listing. But I can often identify spam just from the title. Posts like “FREE 4gb ipod nano!!” and “Take Your New Pair of Uggs!” are obvious spam.
(more…)

Animated in-progress indicator for long running pages

Sunday, February 4th, 2007

On pages that take more than a few seconds to complete, its a good idea to show some type of in-progress meter. Things like bulk email processing and large file uploads are good candidates. Often this doesn’t need to be as complicated as a real progress meter, where you show the actual percentage complete. Instead, an “in progress” meter just gives feedback to the user to let them know that something is going on.
(more…)

Preventing multiple form submissions

Tuesday, January 30th, 2007

Here’s a small snippet to help prevent users from clicking the submit button more than once. When this happens you can end up with duplicate data, or even multiple charges on the user’s credit card. This trick uses JavaScript, and degrades nicely if JS is turned off.

<input type="submit" value="Place Order"
onclick="if (this.value == 'Place Order') { this.value = 'Please Wait...'; return true;} else return false;">

On some applications it is also a good idea to redirect the user to a success page, instead of just displaying a success message. That way they can’t accidentially refresh their browser and POST the form again. This is complicated if you’re displaying a receipt or similar, where you need the data from the form post to create the success message. You could stuff those values in the session in that case.

Drag and drop sort order with Scriptaculous

Sunday, December 31st, 2006

We had a need at work this week to create an interface that allows users to change the sort order of items using a drag-n-drop interface. Drag-n-Drop is one thing that Adobe’s Spry library is missing. But with the help of the Scriptaculous JavaScript library, this is a pretty easy task.

Scriptaculous is an add-on to the Prototype JavaScript framework. Start by downloading Scriptaculous and linking to it on your page. You don’t need to download Prototype separately, its included.

(more…)

Adobe Spry Presentation

Wednesday, November 29th, 2006

Last night I gave a presentation to our local ColdFusion Users Group on Adobe Spry. There is a lot to cover, so we didn’t get too deep, but everyone seemed to be pretty impressed with what they did see of it.

Attached are my slides and code examples. To reduce file size, only the necessary Spry files are included, so if you are going to play around with Spry you really should download the complete release. Also note that if you are trying to run these examples on a Linux box, the two related selects example won’t run. You can blame the Spry team for their sample XML data - the states.xml file references states in mixed case, but the statename.xml files are in lower case.

Here my resource links from the end of the presentation:
Offical Site - http://labs.adobe.com/technologies/spry/
● Ray Camden has written several blog posts about using
Spry - http://ray.camdenfamily.com
● QueryToXml UDF - http://www.cflib.org/udf.cfm?ID=648
● toXML is a ColdFusion component that translates various ColdFusion datatypes into XML strings -
http://ray.camdenfamily.com/projects/toxml/

Download the presentation slides and code examples