AJAX / JavaScript – Stillnet Studios

Did you know about the onerror attribute of the img tag?

Ryan — Tue, 08 Jan 2013 16:05:08 +0000

The other day I discovered that the img tag has an error event. This can be used to automatically load a fall back image when the main image fails for some reason. We encounter this in our dev sites sometimes, because the data is often not 100% correct. For example, our application may ‘think’ there is an image for a product (according to the database), so it writes out an img tag for it. But the image file does not actually exist. So we may end up with a broken image icon, or depending on the browser there may be no indication at all that something is wrong. The tester may get confused as to what’s gone wrong. So I added this code to show an ‘image file does not exist’ image:

That’s it. Be careful that in your error handling code you point to an image file that really exists, otherwise you could go into an infinite loop. One way to be safe regarding that would be to call a function, and remove the onerror attribute so that it only gets fired once.

You could even use this to report a broken image:

The onerror event is supported in all major browsers. The other tags that support onerror are object, script, and style.

jQuery snippet to get all input values

Ryan — Sat, 27 Oct 2012 21:40:57 +0000

I thought this was some interesting JavaScript that I used recently to detect if form fields were filled in. This was a case where if any of a particular group of fields were filled in, I needed to validate and make sure they were all passed in.

var allValues = $("input.someClass").map(function() { return this.value; }).get().join('');

if (allValues.length) {
  // do validation here to make sure all fields are filled in
  }

Online code formatters

Ryan — Thu, 14 Jul 2011 01:53:22 +0000

Lately I’ve come across some online formatting tools that have been very helpful. I like these because they work regardless of what IDE you use, what operating system, etc. They work from any computer that has internet access. Handy when you are troubleshooting on a remote machine.

Here is one for formatting XML: http://www.shell-tools.net/index.php?op=xml_format

And one for JSON from the same site: http://www.shell-tools.net/index.php?op=json_format

Here is a SQL one that helped me out a lot tonight: http://www.dpriver.com/pp/sqlformat.htm

I fed it a horrible looking, very complex query and it made it easily readable.

Formatting CFGRID with JavaScript

Ryan — Mon, 04 Apr 2011 14:47:24 +0000

A while back I had the need to do some formatting on a cfgrid. I was using a typical product/price table but the prices are stored with 4 decimals and we needed to display that much resolution. The html version of CFGRID does not directly support this.

Consider this “fake” query set:

Note the prices have 4 decimal values, this is how they come to us from the database. If you try to display these with this cfgrid code:

You will end up with this:

Notice the 3rd material is displayed correctly, but the others are not, we would like them to all have the same number of decimals for consistency. You might think you could use cfgridcolumn tags and the numberformat attribute like this:

But this will not work, the numberformat attribute only works on Java type cfgrids, not HTML ones. This attempt will silently fail with no error message, leaving you scratching your head for a while. Lucky for us, ColdFusion creates its grids using the populat EXT JavaScript framework. This means there is a lot of documentation and examples out there on how to work with this code in EXT. Its pretty easy to hook into the grid with JavaScript and format the data.

But you can’t run the JavaScript code when your page loads because the grid takes a few milliseconds to get setup, so if your code runs right away it won’t find the grid. You could use the JavaScript setTimeout() to delay execution of your code:

However you would be guessing at how long it will take and its going to vary on each client. I know ColdFusion has the built in ajaxOnLoad function that is supposed to run your code after things like grids have been created, but I have never gotten this to work. I know for sure it won’t work for content that is loaded secondarily after the base page has finished loading, like many of my pages are. But I can’t get it work even on a simple test file. So I wrote a little function to watch for the grid, and call the formatting code when the grid exists.

And this is the result:

The code could definitely be cleaned up a little, so the grid name isn’t duplicated at least, but its a good start. There are lots of other formatters available also, we’ve found the DateRenderer to be useful.

Loading CFrichtext / FCKeditor on-the-fly

Ryan — Sun, 06 Mar 2011 22:20:06 +0000

At work we had an issue where we had too many FCKeditor rich text controls on a page at once. We probably had 6 or 7, each on their own tab. For the tabs we are using the tag. FireFox would handle the page with no problems, but IE would sometimes fail to load one or more of the rich text controls and would not throw any kind of error about it. The controls simply did not display.

A solution we came up with was to load the rich text controls on demand, when the user needed to use them, rather than load them all when the page first loads. At first I thought we’d have to install a separate, stand alone copy of FCKeditor (now called “CKEditor”) to do this, but we found out this is unnecessary, you use the version that comes with CF to do this.

First, we manually load the FCKeditor JavaScript:

Then create a function that can change a regular textarea into a rich text controls:

Then we changed the places on the page that used to have rich text controls to instead use plain textareas. Then placed an link next to each one the user can click on to change the textarea into a rich text. Sometimes they don’t need the functionality of rich text and will just enter plain text into a textarea. Here is the code:

click to use editor

This is used for creating records only, not editing. But it would not be hard to modify this to make it work on an edit page also.

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.

A	B	Ok?
↓	↓		↓