09 July 2010

There's a plugin for that

I recently went through this exercise: for a form submitted by Ajax, disable all the controls on the form until the Ajax update completes. The code to perform the disabling is nothing particularly complicated:



CLIENT.Utilities.disableJQueryDialog = function (jq) {
try {
$(":input", jq).attr("disabled", "disabled");
//NOTES: Disabling other clickable elements (<a>, <span>, etc.)
//is the responsibility of the specific resource overlay.
} catch (e) {
CLIENT.Utilities.postWarnMessage('', 'Utilities.js disableJQueryDialog()', e);
}
};



Call this function with anything that can be a jQuery context, and all the one-line text boxes, dropdowns, checkboxes, and radio buttons in that context are disabled. As the notes indicate, we have other UI elements that the user can interact with (like hyperlinks), so I worked out a simple pattern so that a dialog overlay can register a callback function to disable other HTML elements. I also used this callback to disappear any popups from the date picker plugin and to remove TinyMCEs attached to <textarea>s.

Well, it turns out that there is a jQuery plugin that will do most of what I needed to do, and throw up a "Loading..." message as well, according to Dino Esposito. If I have some extra time this afternoon I'm going to check out the BlockUI plugin for jQuery.

No comments: