Writing jQuery Widgets

This blog is far too quiet. I'm still doing coding. Lots of it in fact, but I'm also doing presentations to the other developers on a regular basis about new topics and tests, so I'm not generating lots of documents for external consumption. Except for this presentation.

This is pretty much a reskinning of info from the jQuery website; The Home Depot isn't actively using Widgets so its not going to be of use internally for a while.

Hit "Download" below to download a PPTX presentation covering the basics of jQuery Widget development.

 

Lessons on setTimeout() and clearTimeout()

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.

 

ASP.NET Error Message: Invalid postback or callback argument

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

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?

 

Preventing Multiple Submissions with Prototype and jQuery

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.

 

Javascript Gerundization

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('<br />');
document.write(gerundize('Submit'));
document.write('<br />');
document.write(gerundize('Hit'));
document.write('<br />');
document.write(gerundize('Take'));
document.write('<br />');
document.write(gerundize('Create'));
document.write('<br />');
document.write(gerundize('Save'));
document.write('<br />');

 

More Entries

Jon Hartmann, July 2011

I'm Jon Hartmann and I'm a Javascript fanatic, UX/UI evangelist and former ColdFusion master. I blog about mysterious error messages, user interface design questions, and all things baffling and irksome about programming for the web.

Learn more about me on LinkedIn.