Don’t send your data twice – a little widget 1


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.

@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:

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

JavaScript:

<script type="text/javascript" src="yourdojodir/dojo/dojo.js"></script>
<script type="text/javascript">
    dojo.require("dojox.form.BusyButton");
</script>

To create a button programatically, use following code:

HTML:

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

JavaScript:

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:

<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.

  • http://priancaria.com/ ria

    Excellent post. I was checking constantly this blog and I’m impressed! Extremely helpful information particularly the last part :) I care for such information a lot. I was seeking this certain info for a long time. Thank you and good luck.