Stillnet Studios » AJAX / JavaScript

Making an ‘Apply to all’ with jQuery

Ryan — Tue, 06 Jul 2010 16:32:00 +0000

Here is a little ‘Apply To All’ feature I added to a large form we had. There were many rows of data, each with several columns the user needs to fill out. Most of the time the values they were entering in the top row ended up being what they would set all the subsequent rows to. So I wanted to add an easy way they could set all the later rows to the value of the first.

This was actually very easy to do with jQuery. I added a class to each form element, and links on the first row, so my code ended up looking something like this:

So now each type of form element is grouped together with a class, and the first row has links next to each element. If I played around with this a little more I think I could add the link with jQuery too, instead of having to check the CurrentRow variable and do this manually.

Here is the applyToAll function. Note you have to copy the values a little differently depending on if the element is a checkbox or a select control.

// grabs the first element in a class, then applies its value to all elements with that class
applyToAll = function(classToApplyTo) {

  // need to apply differently depending on if its a select control or a checkbox. We read what kind of element it is by looking at the 'type'
  switch ( $('.' + classToApplyTo + ':first').attr('type') ) {
    case 'select-one':
      var baseValue = $('.' + classToApplyTo + ':first').val();
      $('.' + classToApplyTo).val(baseValue);
      // also call the change method, just in case there was an onchange handler set on the element
      $('.' + classToApplyTo).change();
      break;
    case 'checkbox':
      var baseValue = $('.' + classToApplyTo + ':first').attr('checked');
      $('.' + classToApplyTo).attr('checked', baseValue);
      // also call the change method, just in case there was an onchange handler set on the element
      $('.' + classToApplyTo).change();
      break;
    }
  }

Here is a demo:

Some of the form elements had onchange handlers that made other text show/hide on the screen, so in the applyToAll function I manually call the ‘change’ method so those events fire on the elements.

This change has saved the users time on filling out huge forms.

Using CFWindow within a form

Ryan — Sun, 28 Mar 2010 03:13:21 +0000

The CFWindow tag can be useful to prompt for information on a form. We use this sometimes after a user has clicked the submit button. We do some client side validation in JavaScript, and if certain conditions are met, we use CFWindow to prompt for some additional information.

Its a little tricky though. If you try to use a CFWindow tag inside a CFForm tag you will get a ColdFusion error. If you use it inside a regular form tag you won’t get an error, but it won’t work like you expect. Lets take this code for example:


	Name: 

	
		Age:

In this example we have a simple form that prompts for a name. When the user clicks the submit button, we use cfwindow to open a popup window and prompt for age. There is a submit button in the popup window so the user can submit the form from there.

But when you run this code and click on the submit button in the popup window, nothing happens. Thats because ColdFusion places the CFWindow code near the end of the file. It won’t be inside your FORM tags. Changing the submit button to a button with an onclick event that submits the form won’t help either. It will cause the form to be submitted, but only the name field will be passed in. Age won’t be passed because that form element wasn’t inside the form tags.

The way around this is to use JavaScript to copy the data from the form fields to hidden fields that are inside the form. Lets change the code to this:


	Name: 
	
	
		Age:

Here I’ve added a hidden field for the age, and given IDs to both age fields and the form tag so I can reference them easily. I’ve also changed the submit button to a regular button, and gave it an onclick handler of doSubmit. Here is the code for doSubmit():

Now when the user clicks the button from the popup window, the values from that window are copied to the hidden form elements that exist in the form, and they will be passed to the server.

I use jQuery, which makes this even easier. I don’t have to setup a bunch of hidden fields in the form, I just create them in the doSubmit() function. You just need to have one element inside the form already that you can reference, so you can add an element after it. In this example I know the name element is there so I am adding the new form elements after that.

A secure, ajaxy captcha with cfimage

Ryan — Fri, 12 Jun 2009 03:05:19 +0000

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 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.

To really be secure you have to keep track of the captcha value on the server side. I decided to use a database but you could also use an in-memory variable or even use the file system. One of the requirements was to allow the user to ask for a new captcha image without having to reload the whole form. That requires ajax, but cfimage has no built in facilities for easily using it through ajax. But its not too hard to work around. Here is a cfc I created to wrap all this up. My storage and retrieval methods in here use a database but you could easily change them to use the application scope or whatever you like. The important part is to delete the captcha from your system (database, application scope, whatever) after its been solved. This will prevent an attacker from manually decoding one captcha and then using that is his script.



	
		
		
		
		

		
		

		
		
		
		

		

		
		
		SET NOCOUNT ON
		INSERT INTO captcha_values (captcha_value) VALUES
		()
		SELECT SCOPE_IDENTITY() AS captcha_id
		SET NOCOUNT OFF
		

		
		

		
			
		

		
		
		

		
		

	

	
		

		

		
		SELECT captcha_value FROM captcha_values WHERE
		captcha_id = 
		

		
			
		

		
		
		DELETE FROM captcha_values WHERE
		captcha_id = 
		

		
	

	
		
		

		
		
		
		
		
		

		
		for(i=1; i <= length; i++) {
			char = mid(chars, randRange(1, len(chars)),1);
			result&=char;
		}

Then in your form page you need a little javascript to allow the user to refresh the image.

Then display the actual captcha on the page:


#myCaptcha.imgtag#change code

Type in the letters you see above:

With me so far? Now here is how you validate the captcha on your “action” page:


       Throw your failed captcha error here!

Here is the SQL I used for my captcha table.

CREATE TABLE [captcha_values] (
	[captcha_id] [int] IDENTITY (1, 1) NOT NULL ,
	[captcha_value] [varchar] (50) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL ,
	[date_added] [smalldatetime] NULL CONSTRAINT [DF_captcha_values_date_added] DEFAULT (getdate())
) ON [PRIMARY]
GO

And here is the query I run nightly to clear out abandoned entries that are older than 24 hours:

DELETE FROM captcha_values WHERE
DateDiff(hour,date_added,CURRENT_TIMESTAMP) > 24

Programatically adding additional JS onload functions

Ryan — Mon, 27 Apr 2009 15:47:18 +0000

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:

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

Dynamically adding and removing form elements

Ryan — Mon, 05 Jan 2009 16:34:16 +0000

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.

First I setup a hidden form field that would contain the number of elements currently displayed on the form. This value gets changed as new elements are removed or added, so I can keep track of where to add or remove them from. Its also very useful when I submit the form, to know how many elements to look for.

I start out initially showing 5 elements, so I set this hidden field to that number.

Here is the form element I needed to replicate:


  1.
  1" value="">:

(the items in red are values that change with each line on the form)

And here is what they looked like on the screen:

The first thing I did was add an ID to the

tags so I could reference them.

id="row_#RowCount#">
  1.
  :

Then I created two functions, one for removing elements and another for adding them. The “Show More” and “Show Less” links shown in the screenshot above then link to these functions.

The removal one is easy.

The function to add another element is a little more involved. Since I know the first line will always be there, I clone that element, along with its children. Then alter the parts of it that reference “1″, changing them to be the counter value for the new element. Then add it at the end of the current list of form elements. I added a div around the whole group of elements with an id of “formElementsParent”. I know the last element inside this div is a paragraph containing the show more/less links, so I can find that and then use the insertBefore() function to add the new element to the DOM.

Try it out below:

[HTML1]

I should note that although I’m using P elements to contain my rows here, I realize many developers still use tables to lay out their forms. This method works just fine with tables, too, you would just reference your TR in the places I’m referring to my P.

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

Ryan — Tue, 24 Jun 2008 02:51:24 +0000

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.

I added a nice spinning wheel in-progress indicator, and some code to prevent the form being submitted more than once. But when FireFox users (2.x and 3.x) had an error on their form and used their ‘Back’ button, the form was redisplayed as they left it – without the DOM or JavaScript variables being reset. What I mean by that is the “in-progress” spinning wheel was still spinning (because a div element was still set to visible), and the submit button still said “Please Wait” instead of submit. And of course they couldn’t submit it after fixing their errors (because of the anti-double submit JavaScript code).

This didn’t happen in IE – the page was reset so that the in-progress meter was set to hidden, and the submit button value was back to its original state: “Submit” instead of “Please Wait”. I did a lot of googling to see if there was a way around this problem. I found many people asking this same question, but no good answers. Here is a large thread on Experts Exchange (scroll to the bottom to see all the answers) about this issue. You can see many people offer solutions which they are sure should fix the problem – but they don’t. Many people suggested using “onload” to set the submit button back to its original value. The problem is none of the JavaScript code is being run – onload won’t be run, nor will any other JS code you have in the page. Its served exactly as you left it, from your cache. On the subject of cache – setting this page to no-cache won’t solve the problem either, because then all the users form data will be gone.

But I finally did come across a solution. The existence of an onUnload function will make FireFox behave properly when going ‘Back’ to the previous page. I’m not exactly sure why this works, I’m guessing it has something to do with making FireFox register the page as unloaded, so that when you come back, it loads again, running any initial Javascripts that are defined.

You don’t have to actually do anything in your unload function, it just has to exist. You don’t have to have access to the tag either, thank goodness, as this is sometimes hard to do within a framework.

Here’s how to define an empty onUnload function:

Thanks to the FireFox Answer site where I finally found this solution.

ColdFusion 8 auto-suggest shows through other form fields

Ryan — Wed, 30 Jan 2008 23:17:24 +0000

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:

Then I switched the other two fields to be cfinputs so I could add autosuggest to them, too. And that is where I ran into problems:

This happens in IE 6 and 7, but not FireFox. The problem occurs because when ColdFusion creates the tag from a , it wraps it in two divs with a bit of related CSS. There is a conflict with the way ColdFusion sets the CSS float and z-index properties.

Thanks to my co-worker, CSS guru Jake Churchill, for figuring out a solution. All that needs to be done is to re-layer the inputs by setting their zindex. ColdFusion names the surrounding divs in an consistent way (thankfully they don’t use random names like some of the other ColdFusion JavaScript functions!), so we can just add a little CSS of our own to fix the problem. The divs end up named like myformfield1autosuggest, myformfield2autosuggest, etc. Knowing that, we can place this into our html page:

Even better, here is a JavaScript script file you can reference in your page that will automatically fix these issues (thanks Jake!).

Download here (note: due to formatting issues that may occur on this page, you really should download the script using this link, instead of copying and pasting from this page)

The script contents:

function fixAutoSuggest() {
	divs = document.getElementsByTagName("div");
	s = "";
	document.write(s);
};

You must then call this function after your form elements have been written to the browser. So – after your closing form tag, put this:

It does not work to simply call the function in the body’s onload attribute.

My GreaseMonkey Script: craigslist spam buttons

Ryan — Thu, 08 Feb 2007 14:10:48 +0000

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.

So my script adds the flag-as-spam buttons to the listing page, so you don’t have to click onto the detail page of each item to flag it.

You can get my script from userscripts.org, an archive of GreaseMonkey scripts. Here is what it looks like:

Before:

After:

And the great news that I discovered while writing this is that a lot of GreaseMonkey scripts run in Opera, my favorite web browser. So I made sure to write this one in a way that worked in Opera. To use this in Opera, go to the Tools menu, then Preferences -> Advanced -> Content -> JavaScript options, and choose a directory for the “User Javascript files” field. Then drop my script in that directory. Thats it!

Animated in-progress indicator for long running pages

Ryan — Sun, 04 Feb 2007 06:23:33 +0000

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.

I usually place a hidden element on the page, then use JavaScript to make it appear when the form is submitted. Something like:


    
    Please Wait...

Note that there is an image used in the in-progress message, this is important. A static “Please Wait” message tells your user they should wait, but without the feedback of the moving image, they could still get the impression something is locked up. You can get some awesome free progress meters from http://www.ajaxload.info.

Of course Internet Explorer throws a wrench into things. IE will stop any animated gifs from animating when the form is submitted. This is a problem in IE6 and 7. This is far worse than having no progress meter, since it appears as if something has locked up. But there is a work around. We just need to kick start the animation after the form submits. We do this by resetting the source of the image with JavaScript. We have to reset the src after the form submits, and the form submits when our function returns. So we make use of the setTimeout function, which executes a line of JavaScript after a specified number of milliseconds. We’ll also throw in an anti-double submit feature similar to what I mentioned in my last post.

If your form is long enough that it needs scroll bars, be sure to place the in-progress message where the user will see it when they click the submit button.

Preventing multiple form submissions

Ryan — Tue, 30 Jan 2007 16:28:43 +0000

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.

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.

A	B	Ok?
↓	↓		↓