Disable button on AJAX Postback

Many different implementations exist for disabling a button on AJAX post-back. I find the following code snippet to be very simple, clear and effective.

Although this example applies to ASP. NET, with small modification this would work for PHP as well.

In general, this works because your server side code is already creating javascript event handlers for you which is used to handle the AJAX callbacks. This saves you programming time and makes it more dynamic.

Since these event handlers are already present in the client-side page, with little effort, we can easily intercept these calls with some simple JS and plug in our own code. See below. Enjoy. 😉

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(startRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);

function startRequest(sender, e) {
//disable button during the AJAX call
document.getElementById('<%=btnSubmit.ClientID %>').disabled = true;
document.getElementById('<%= btnSubmit.ClientID %>').src = '<%= this.ResolveUrl("~") %>uploads/english/images/buttons/bu_submit_off.jpg';
}

function endRequest(sender, e) {
//re-enable button once the AJAX call has completed
document.getElementById('<%= btnSubmit.ClientID %>').disabled = false;
document.getElementById('<%= btnSubmit.ClientID %>').src = '<%= this.ResolveUrl("~")%>uploads/english/images/buttons/bu_submit.jpg';
}

var instance = Sys.WebForms.PageRequestManager.getInstance();
instance.add_initializeRequest(instance_initializeRequest);

function instance_initializeRequest(sender, args) {
if (instance.get_isInAsyncPostBack()) {
alert('Still processing request. Please wait..');
args.set_cancel(true);
}
}

Or alternatively, in conjuction with a much simpler function below:

//add to your button like so
<asp:ImageButton ID="btnSubmit" runat="server" OnClick="btnSubmit_Click"                                 
AlternateText="Submit" ImageUrl="~/Images/btn_submit.gif" OnClientClick="disableme(this,'submit')" />
      function disableme(o, n) {
            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function() { o.disabled = true; o.blur; o.src = '<%= this.ResolveUrl("~") %>Images/ajax-loader.gif'; });
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() { o.disabled = false; o.blur; o.src = '<%= this.ResolveUrl("~") %>Images/btn_' + n + '.gif'; });
        }

The javascript can also be registered on page load. This may be required if you’re using AJAX.

protected void Page_Load(object sender, EventArgs e)
    {
ScriptManager.RegisterStartupScript(this,this.GetType(),"","function disableme(o, n) {Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function () { o.disabled = true; o.blur; o.src = '" + this.ResolveUrl("~") +"Images/ajax-loader.gif'; });Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () { o.disabled = false; o.blur; o.src = '" + this.ResolveUrl("~") + "Images/btn_' + n + '.gif'; });}",true);
}

About Ronnie Diaz

Ronnie Diaz is a software engineer and tech consultant. Ronnie started his career in front-end and back-end development for companies in ecommerce, service industries and remote education. This work transitioned from traditional desktop client-server applications through early cloud development. Software included human resource management and service technician workflows, online retail e-commerce and electronic ordering and fulfillment, IVR customer relational systems, and video streaming remote learning SCORM web applications. Hands on server experience and software performance optimization led to creation of a startup business focused on collocated data center services and continued experience with video streaming hardware and software. This led to a career in Amazon Prime Video where Ronnie is currently employed, building software and systems which stream live sports and events for millions of viewers around the world.

Posted on June 21, 2010, in Programming & Development and tagged , , , , , , , , , , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: