Don’t send your data twice – a little widget

nonken — Sat, 02 Aug 2008 11:43:09 +0000

How many times do we need to disable a button after sending a xhr call or submitting a form?
Almost everytime, the element which induces a data transfer, should be disabled until you get a reply from the server.

I’ve written a short and simple extension of the “dijit.form.Button” widget called “dojox.form.BusyButton”, which provides a simple API to let you deal with those cases when you don’t want to allow the user to hit the submit button a second time.

Lets take a look at two examples

Button without timeout:

Button with five second timeout:

You can find a few more examples at the Dojox test page. There you will find a few special cases of how to use the widget.

Download the code

You can get the widget when downloading the latest nightly from http://archive.dojotoolkit.org/nightly/ or the upcoming 1.2 release.

To include it on your page simply insert following code

CSS:

Note that you also have to include the dijit theme CSS on your page. This can be either the tundra, nihilo, soria or a custom theme. In this example we will use the nihilo theme.

1 2	@import url(yourdojodir/dijit/themes/nihilo/nihilo.css); @import url(yourdojodir/dojox/form/resources/BusyButton.css);

And add the theme CSS to your body tag:

1	<body class="nihilo">...</body>

JavaScript:

1
2
3
4

To create a button programatically, use following code:

HTML:

1	<div id="busyButton"></div>

JavaScript:

1
2
3
4
5
6
7
8

dojo.addOnLoad(function(){
var button = new dojox.form.BusyButton({
id: "submit",
busyLabel: "Sending mail...",
label: "Send mail",
timeout: 5000
}, dojo.byId("busyButton"));
});

To create a button via normal markup:

1	<button dojotype="dojox.form.BusyButton" busylabel="Sending data...">Send data</button>

Following parameters can be passed besides the default dijit.form.Button ones, when creating the button

isBusy: This is really the internal state. When you pass it being true, the button will be busy initially
busyLabel: This is the text you see when the button is busy
timeout: a timeout, the button will be reset to original state after the timeout expires
useIcon: set useIcon to false if you don’t want to see the loading icon

Following methods besides the default dijit.form.Button ones, can be used or connected to

makeBusy(): Changes the buttons state to busy and disables the button
cancel(): Resets the button to its normal state – enabled
resetTimeout(/*Int*/ timeout): you can reset an existing timeout and set a new value. This is useful for chained responses
setLabel(/*String*/ content, /*Int*/ timeout): lets you change the label of the button and connect an optional timeout to that label

Enjoy.

uxebu » blog » Forms