Stillnet Studios

A while back I had a couple posts on preventing double form submissions and showing an in-progress meter for long running pages. These work great, as long as you are using a type of validation that redisplays the form when there are errors.

This doesn’t work so well when you are not redisplaying the form. For example, I’ve seen some validation where the user is shown an error message and just told to use their ‘Back’ button to fix the errors. Sometimes a JavaScript history.go(-1) link is displayed as well. I had to work on a site today that used this type of validation.
Continue reading ‘Resetting the DOM and JavaScript when using the ‘Back’ button in FireFox’ »

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:

Continue reading ‘ColdFusion 8 auto-suggest shows through other form fields’ »

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.
Continue reading ‘My GreaseMonkey Script: craigslist spam buttons’ »

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.
Continue reading ‘Animated in-progress indicator for long running pages’ »

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.

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.

Continue reading ‘Drag and drop sort order with Scriptaculous’ »

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