Archive for the 'AJAX / JavaScript' Category

« Previous Entries

A secure, ajaxy captcha with cfimage

Thursday, June 11th, 2009

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 to far just let me state for the record that I hate 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.
(more…)

Posted in AJAX / JavaScript, ColdFusion | 1 Comment »

Programatically adding additional JS onload functions

Monday, April 27th, 2009

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 in AJAX / JavaScript, Web Development | 2 Comments »

Accessing the document object in an iframe

Thursday, April 23rd, 2009

If you ever need to access the document object inside one of your iframes, this nice snippet of code works out the cross browser issues and returns the document object.

<script language="JavaScript">
var myiframe = (document.getElementById('YourFrameID').contentWindow.document)
		? document.getElementById('YourFrameID').contentWindow.document
		: document.getElementById('YourFrameID');
</script>

Note that you can only do this if the iframe src is from the same domain as your main page. If you are loading up an iframe of yahoo.com on your whatever.com site, you won’t be able to access it with JavaScript.

Often when I’m doing this, I have the need to do something when the iframe finishes loading. I use this code to do that:
(more…)

Posted in AJAX / JavaScript, Web Development | No Comments »

Dynamically adding and removing form elements

Monday, January 5th, 2009

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.
(more…)

Posted in AJAX / JavaScript, Web Development | 16 Comments »

Resetting the DOM and JavaScript when using the ‘Back’ button in FireFox

Monday, June 23rd, 2008

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.
(more…)

Posted in AJAX / JavaScript, Web Development | 3 Comments »

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…)

Posted in AJAX / JavaScript, ColdFusion, Web Development | 16 Comments »

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…)

Posted in AJAX / JavaScript, Web Development | 31 Comments »

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…)

Posted in AJAX / JavaScript, Web Development | 10 Comments »

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.

Posted in AJAX / JavaScript, Web Development | 1 Comment »

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…)

Posted in AJAX / JavaScript, Web Development | 33 Comments »

« Previous Entries