Archive for the ‘AJAX / JavaScript’ Category

A while back I had to implement a captcha on a client’s site. The site owner wanted a simple small captcha (that ruled out reCAPTCHA). We decided to try the new captcha features of ColdFusion8. What you may not realize is that the new captcha feature does not provide the whole captcha system, instead it merely can create captcha images. Its up to you how you implement your captcha system.

Before I get too far just let me state for the record that I dislike captchas and will be happy when they are looked upon like we look at the <blink> tag now. So you don’t need to leave comments telling me how I shouldn’t be using a captcha in the first place. :-) The client specifically wanted this feature at this point in time.

I’ve seen some approaches that place the clear text value of the captcha in a hidden field. Then when the form is submitted they compare that value against what the user had typed in. I don’t feel this way is very secure. It will stop simple bots, but you need to guard against more than just that. Sometimes spammers code their bots to work against a specific site. If they find your hidden clear text captcha value, they will easily grab it and use it to submit your form. If this is a simple contact form then you might not have much to worry about, but if its a “send to a friend” feature – watch out, those are high value targets.

Encrypting the hidden value doesn’t help much either. That adds one more step to what the spammer needs to do. They will have to manually read one of your captcha images – then they have the clear text and encrypted values to your captcha system. Now they can just submit that encrypted/plain text pair over and over again to your form.
Continue reading ‘A secure, ajaxy captcha with cfimage’ »

Posted by Ryan on June 11 2009 at 10:05 pm under AJAX / JavaScript, ColdFusion.
2 Comments.

Sometimes when writing JavaScript I need to have something run as soon as the page has finished loading. This is usually done by placing a call to the function in the body’s onload attribute like:

<body onload="myFunc()">

But this is not always possible. For example by the time you get to your logic that decides it necessary to call a function onload, the header may have already been displayed by a cfinclude or by your framework.

You could use JavaScript to set the onload event, like

window.onload = myFunc;

But what if there was already something in the onload attribute of the body tag? The above code will reset whatever was there. But here is a nice snippet of code that will add functions to the onload event. I can’t take credit for it, and I don’t remember exactly where I found it but its been quite useful to me. It works in all the popular browsers.

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			if (oldonload) {
				oldonload();
			}
			func();
		}
	}
}

Then you can add as many functions as you want to be called when the page loads. Note you do not use parenthesis when specifying the function names – you aren’t calling then, just referencing them.

addLoadEvent(myFunc);
addLoadEvent(myFunc2);
addLoadEvent(yetAnotherFunction);

Posted by Ryan on April 27 2009 at 10:47 am under AJAX / JavaScript, Web Development.
4 Comments.

Sometimes its helpful to allow users to dynamically add or remove elements from a form. An example might be an image upload page, where you want to allow users to upload a varying number of images. Using JavaScript you can easily place more/less links on the page that show and hide form elements.

This is often done by placing a large number of elements on the form, and setting most of them to be initially hidden with CSS. When the user clicks the “show” link, the next element is unhidden. This is not the best solution however, especially when there is a possibility of having tens of elements – thats a lot of unnecessary html to send down the pipe and render.

Another method is to actually create and destroy elements using the DOM functions. Here’s how I did this recently on a page that need to have any number of form elements.
Continue reading ‘Dynamically adding and removing form elements’ »

Posted by Ryan on January 5 2009 at 11:34 am under AJAX / JavaScript, Web Development.
16 Comments.

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’ »

Posted by Ryan on June 23 2008 at 9:51 pm under AJAX / JavaScript, Web Development.
3 Comments.

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
Continue reading ‘ColdFusion 8 auto-suggest shows through other form fields’ »

Posted by Ryan on January 30 2008 at 5:17 pm under AJAX / JavaScript, ColdFusion, Web Development.
19 Comments.

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’ »

Posted by Ryan on February 8 2007 at 8:10 am under AJAX / JavaScript, Web Development.
31 Comments.

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’ »

Posted by Ryan on February 4 2007 at 12:23 am under AJAX / JavaScript, Web Development.
12 Comments.

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.

Posted by Ryan on January 30 2007 at 10:28 am under AJAX / JavaScript, Web Development.
1 Comment.

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’ »

Posted by Ryan on December 31 2006 at 9:51 pm under AJAX / JavaScript, Web Development.
33 Comments.

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

Posted by Ryan on November 29 2006 at 5:42 pm under AJAX / JavaScript, Web Development.
Comment on this post.