Jon Hartmann - Javascript

Lessons on setTimeout() and clearTimeout()

Fri, 23 Apr 2010 12:28:00 -0500

My world was rocked the other day while looking through some source code for a Javascript widget at work. Normally, I'm the one giving lessons in JS techniques, but I was absolutely floored to see how my coworker had used setTimeout() and clearTimeout() in ways I'd never seen before. [More]

ASP.NET Error Message: Invalid postback or callback argument

Mon, 18 Jan 2010 10:35:00 -0500

If you're trying to create a post-back from Javascript in ASP.NET, you might have come across the following error:

Invalid postback or callback argument. Event validation is enabled using in configuration or in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

This message is caused because ASP is attempting to validate that a given post-back that was initiated from Javascript is really supposed to be happening; basically, it is an attempt to try to prevent cross-site scripting from issuing post-backs. You can do as the message says and register the callback, you can edit your web.config file, or you can do what I do, and add the following line to your Page directive in your .aspx page like so: <%@ Page EnableEventValidation="false" ... %>

Be aware that by setting EnableEventValidation to false, you're opening a hole in your security. I'm using this in a situation where the risk has been minimized, but if you're including external scripts, you might want to actually go through the trouble of registering the event.

Using Event Bubbling to Your Advantage

Fri, 12 Jun 2009 11:00:00 -0500

Its happened to everyone working with Javascript: you build your test app that handles clicks on elements to do really neat things and everything's going great. You move it live, and as the data starts coming in your app gets slower and slower until finally the system starts to become unusable. Whats the problem? In testing you had maybe five or ten clickables, but your app has been growing, and you've now got 20, 60, 120 or more, and the time it takes to bind all of your click events is skyrocketing. What if you could just use a single handler for all of them? [More]

Preventing Multiple Submissions with Prototype and jQuery

Thu, 11 Jun 2009 18:56:00 -0500

If there is one problem that plagues me across applications, its users that are too antsy to wait for the page to come back after hitting submit on a form. Even worse, some people just instinctually double and triple click. How do you keep these pesky users from duplicating records or charging themselves three times for that item in your e-shop? Click "more" to see how I do it in Prototype and jQuery. [More]

Javascript Gerundization

Fri, 22 May 2009 10:57:00 -0500

Ever needed to "gerudize" a word? No? I needed to today to convert links and button labels like "Save" and "Submit" into their gerund equivalents: "Saving" and "Submitting". I found a set of rules on how to convert a verb into a noun here, and put together a simple Javascript implementation. I might do a ColdFusion one later to match my Pluralize() and Singularize() utility functions.

function gerundize (word) {
	if ( word.match( /[^aeiou]e$/i ) ) {
		word = word.slice(0, word.length-1);
	} else if ( word.match( /[^aeiou][aeiou][^aeiou]$/i ) ) {
		word = word + word.slice(word.length-1, word.length);
	}

	return word + 'ing';
}

And the test code:

document.write(gerundize('Think'));
document.write('
');
document.write(gerundize('Submit'));
document.write('
');
document.write(gerundize('Hit'));
document.write('
');
document.write(gerundize('Take'));
document.write('
');
document.write(gerundize('Create'));
document.write('
');
document.write(gerundize('Save'));
document.write('
');

Escaping Console.log()

Fri, 20 Mar 2009 15:10:00 -0500

Ray Camden just Twittered about checking in code that still has console.log() in the Javascript. He rightly points out that console.log() causes problems for browsers that don't understand it, but you don't really have to have Firebug installed as some browsers like Chrome understand it natively. Rather than try to purge my code of console.log(), and need them again later, my solution is to add an "escape" that lets console.log() evaluate harmlessly on browsers that don't support it. Click more to see the code. [More]

Wild Friday Night with Javascript Controllers

Fri, 20 Feb 2009 22:53:00 -0500

All because of Ben Nadel, I'm writing Javascript examples instead of playing Fallout 3 tonight... Ok, so in my post evolution of a js controller scheme, Ben commented that he wasn't comfortable with the idea that the this value inside my controller was the window object, rather than the controller itself. So, I've set out to see if I can rework the controller to use "new" and grow up to be a real object. Read more to see how I do. [More]

Evolution of a JS Controller Scheme

Thu, 19 Feb 2009 16:53:00 -0500

It took me quite a while to discover the power and flexibility of a controller scheme for Javascript, but thanks to some awesome videos and tutorials, I've come up with a setup that works quite well, and I thought I'd share it with you. I'm going to start with a basic object, and evolve it into what I use, so you can understand why each thing is done, and what happens at each stage. [More]

Example of using Template in Prototype

Thu, 19 Feb 2009 14:49:00 -0500

In response to a blog post by Ray Camden about jQuery and duplicating form fields, I put together an example of using the Template class in Prototype. As an added bonus, I designed this example to also handle form resets and to feature a controller based design. You can click here to view a demo of the example in action. Read more to get the break down of the code. [More]

CFGrid Displays No Data Until Sort

Wed, 18 Feb 2009 15:53:00 -0500

So, another annoying bug, but at least I found a solution this one. I'm using Prototype and trying to get CFGrid running. Things went OK except that when I made a grid, it would load looking like the example to the left; no data listed. If you clicked on the "Students" header, you'd get the full list of students like the example on the right. I was finally able to find an article in the House of Fusion mail archive that described no only the problem, but a solution:

Solution! After tearing the Javascript apart for both libraries, I found the problem. Both libraries use a function called "defer", which basically just delays performing that action until the interpreter's callstack is empty. My solution then was to change the name of this function in Prototype and then just change the name wherever Prototype references it also. None of the Prototype plugins I have use the function, so it's seems like it's pretty low-key.

So I quickly did a find and replace and changed Prototype's "defer" to "pdefer" and things started up fine.

Javascript Abstraction in ColdFusion: Pro or Con?

Tue, 09 Dec 2008 10:49:00 -0500

There is an interesting article up on Ajaxian.com today discussing the pros and cons of Javascript abstractions. It's aimed squarely at the root of an issue that I have with ColdFusion 8's Ajax and Javascript integration: abstractions are easier and save time, but do you loose something by giving away that control? I heard Andy Powell give a talk at CFUnited in 2007 about the (then) upcoming release of ColdFusion 8 and its Ajax and JS support, where he asked the room to raise their hands if they liked Javascript. Those few of us that did got some weird looks from the crowd... how weird: people that use a technology might actually like it? I like Javascript, and I don't think that thats weird. If I need FCKEditor in ColdFusion, I still use FCKEditor, rather then the new tags. If I need ExtJS, I still use ExtJS rather then the new tags. Why? Because I know that I can program better for my situation then Adobe. Its not that Adobe's code isn't good, its just that they have to program in such a way that it works for everyone, and that always creates bloat. Always. Using <cfwindow> will save you some time, I'm not saying that it wont, but its going to add overhead that might not intend. You might not ever notice that overhead, and thats fine, but what happens if its a problem? Ultimately you'll have to go find someone that actually knows (and probably likes) Javascript to fix the problem for you. Why not get that person to write it in the first place? Where would you draw the line? The purist in me says "Code it straight in JS and don't mess around." while the realist in me says "If most people don't need to rework the tags, then its working fine." Do you think abstraction can come back to bite you, or is it just a time saver?

Javascript Maintainablity Lecture by Chris Heilmann

Wed, 15 Oct 2008 12:07:00 -0500

A very nice video of a presentation on Javascript maintainability. It taught me a couple of things, including the use of a configuration object to define IDs and other text in a single location that makes changing the code easier.
Presentation: Chris Heilmann: Maintainable JavaScript, part 1 from Bachelor-ict.nl on Vimeo.
Presentation: Christian Heilmann: Maintainable JavaScript, part 2 from Bachelor-ict.nl on Vimeo.

Javascript isValid()

Wed, 28 May 2008 12:09:00 -0500

I dunno about you, but I love the isValid() function in ColdFusion. Its just an amazing collection of usefulness that I use just about all the time. Recently though, I've found myself really wanting something equivalent for client-side validation, so I put together this bit of Javascript code:


function isValid (type, value) {
	var regex;
	
	switch (type.toLowerCase()) {
		case 'email':
			regex = /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i
			break;
		case 'telephone':
			regex =  /^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$/;
			break;
		case 'date':
			regex = /^(?=\d)(?:(?:(?:(?:(?:0?[13578]|1[02])(\/|-|\.)31)\1|(?:(?:0?[1,3-9]|1[0-2])(\/|-|\.)(?:29|30)\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})|(?:0?2(\/|-|\.)29\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))|(?:(?:0?[1-9])|(?:1[0-2]))(\/|-|\.)(?:0?[1-9]|1\d|2[0-8])\4(?:(?:1[6-9]|[2-9]\d)?\d{2}))($|\ (?=\d)))?(((0?[1-9]|1[012])(:[0-5]\d){0,2}(\ [AP]M))|([01]\d|2[0-3])(:[0-5]\d){1,2})?$/;
			break;
		case 'numeric': 
		case 'number':
			regex = /^[\d\.]+$/;
			break;
		case 'integer':
			regex = /^\d+$/;
			break;
		case 'zipcode':
			regex = /^\d{5}([\-]\d{4})?$/;
			break;
	}
	
	return value.match(regex);
}

Please note that I take no credit for the regular expressions used in this function. I collected them from various sources, and I would credit the original creator if I could find my list of where I got them.

Prototype.js on IE smashed by id="tblStudents"

Mon, 07 Apr 2008 17:29:00 -0500

Ok, so here is the weirdest IE bug I've ever seen.... the weirdest by far. I was trying to get some sortable table code up and running and after I got it going in FireFox, IE 7 was throwing fits. I narrowed it down to a specific instantiation of the table that I had on my page, and then started hacking things out. I pulled out all my custom DisplayTable code. I remove all of my custom code completely. I removed Scriptaculous. Turns out IE has a weird behavior where it adds a global scope variable with the same name as any id, so that you can just say tblStudents.innerHTML = 'whatever' without needing to fetch the element. My lack of a var keyword before my variable ment it was trying to reference that variable and causing a conflict. [More]

Prototype Based State Manager

Sun, 06 Apr 2008 17:37:00 -0500

I've known that you could use anchor tags as a way to manage the state of a Javascript application for a while now, but I've never really messed with how that is actually setup. I got bored on Friday, and this is what I came up with. [More]