Skip to Content | Skip to Navigation


dojox.form.BusyButton

Status:Draft
Version:Beta
Author:Nikolai Onken

BusyButton is a simple widget which provides implementing more user friendly form submission. When a form gets submitted bu a user, many time it is recommended to disable the submit buttons to prevent double submittion. BusyButton provides a simple set of features for this purpose

Examples

The first example shows you how to create a nifty button programatically

This example show how to use the busy button without internal timeout. Once you receive a server response from the server (than can include a timeout from the server) you can and should change the status of the button.

The following example has a built-in timeout.

In this example we will set a new label by clicking on a button (this can be a server response as well). The first state will not have a timeout, the second state will have a timeout of 2 seconds

The last example uses a little bit of trickery to create a button which is disabled initially and enabled after the timeout. This sort of button is very hand for license agreements or times when you want to be sure the user can’t submit a form (usually forcing a user to read the license agreement doesn’t work, but its worth a try). The chance is high that the button already is not disabled anymore - just reload the page and scroll to this example real quick.



  • Demo
  • Copy&Paste
  • JavaScript
  • HTML
  • CSS
 
Copy to clipboard

To run the demo in your own environment, copy and paste the full source into an editor and open it in a browser.

Copy to clipboard
<script type="text/javascript">
    dojo.require("dojox.form.BusyButton");

    dojo.addOnLoad(function() {
        var button = new dojox.form.BusyButton({
            id: "submit",
            busyLabel: "Sending mail...",
            label: "Send mail",
            timeout: 5000
        },
        "placeHolder");
    });
</script>
Copy to clipboard
<div id="placeHolder">
</div>
Copy to clipboard
<style type="text/css">
    @import url(/_static/dojo/dojox/form/resources/BusyButton.css);
</style>
  • Demo
  • Copy&Paste
  • JavaScript
  • HTML
  • CSS
 
Copy to clipboard

To run the demo in your own environment, copy and paste the full source into an editor and open it in a browser.

Copy to clipboard
<script type="text/javascript">
    dojo.require("dojox.form.BusyButton");
</script>
Copy to clipboard
<button dojoType="dojox.form.BusyButton" busyLabel="Sending data...">
    Send data
</button>
Copy to clipboard
<style type="text/css">
    @import url(/_static/dojo/dojox/form/resources/BusyButton.css);
</style>
  • Demo
  • Copy&Paste
  • JavaScript
  • HTML
  • CSS
 
Copy to clipboard

To run the demo in your own environment, copy and paste the full source into an editor and open it in a browser.

Copy to clipboard
<script type="text/javascript">
    dojo.require("dojox.form.BusyButton");
</script>
Copy to clipboard
<button dojoType="dojox.form.BusyButton" busyLabel="For 10 seconds" timeout="10000">
    Hold your breath
</button>
Copy to clipboard
<style type="text/css">
    @import url(/_static/dojo/dojox/form/resources/BusyButton.css);
</style>
  • Demo
  • Copy&Paste
  • JavaScript
  • HTML
  • CSS
 
Copy to clipboard

To run the demo in your own environment, copy and paste the full source into an editor and open it in a browser.

Copy to clipboard
<script type="text/javascript">
    dojo.require("dojox.form.BusyButton");
    dojo.addOnLoad(function() {
        dojo.connect(dijit.byId("buttonChangeState"), "onClick", function() {
            dijit.byId("buttonChargeback").setLabel("Chargeback failed...", 2000);
        });
    });
</script>
Copy to clipboard
<button dojoType="dojox.form.BusyButton" id="buttonChargeback" busyLabel="Canceling payment...">
    Cancel payment
</button>
<button dojoType="dijit.form.Button" id="buttonChangeState">
    Change state
</button>
Copy to clipboard
<style type="text/css">
    @import url(/_static/dojo/dojox/form/resources/BusyButton.css);
</style>
  • Demo
  • Copy&Paste
  • JavaScript
  • HTML
  • CSS
 
Copy to clipboard

To run the demo in your own environment, copy and paste the full source into an editor and open it in a browser.

Copy to clipboard
<script type="text/javascript">
    dojo.require("dojox.form.BusyButton");
    dojo.addOnLoad(function() {
        dojo.connect(dijit.byId("buttonLicense"), "_onClick", function() {
            dijit.byId("buttonLicense").setLabel("Creating account...");
            dijit.byId("buttonLicense").resetTimeout();
        });
    });
</script>
Copy to clipboard
<button dojoType="dojox.form.BusyButton" id="buttonLicense" isBusy="true"
busyLabel="Please read the agreement..." timeout="10000">
    I Agree
</button>
Copy to clipboard
<style type="text/css">
    @import url(/_static/dojo/dojox/form/resources/BusyButton.css);
</style>