How to disable and change the text of decorated buttons during Ajax request

RELATED TO:

Article information

Article relates to

 RadControls for ASP.NET AJAX

Created by

 Georgi Tunev

Last modified

 2009/1/29

Last modified by

 Fiko


A common scenario is to disable and change the text of buttons during an Ajax request. The attached example shows how to do this when these buttons are decorated with RadFormDecorator.
What you need to have in mind in such scenario is that you should modify both the real (hidden) button and the decorated one. To do this, you need to have the ClientID of the button. Since RadAjax's OnAjaxRequestStart/End eventhandlers provides you with the UniqueID of the control that initiated the Ajax request, you can use a regular expression to convert the UniqueID to ClientID.

JavaScript:
<script type="text/javascript">
    function OnAjaxRequestStart(oAjaxPanel, eventArgs)
    {
        //pass the uniqueID of the real button
        setButtonEnabled(eventArgs.get_eventTarget(), false);
    }
 
    function OnAjaxRequestEnd(oAjaxPanel, eventArgs)
    {
        //pass the uniqueID of the real button
        setButtonEnabled(eventArgs.get_eventTarget(), true);
    }
 
    var loadingMessage = "Processing...";
    var lastClickedButtonValue;
    function setButtonEnabled(realButtonUniqueID, isEnabled)
    {
        //convert the uniqueID to ClientID
        var buttonClientID = realButtonUniqueID.replace(/\$/g, "_");
        var buttonIdSelector = "#" + buttonClientID;
        var jQ = $telerik.$; // jQuery
        if (isEnabled)
        {
            //restore the text of the button
            jQ(buttonIdSelector).val(lastClickedButtonValue);
            //Enable the decorated button
            jQ(buttonIdSelector).attr('disabled', '');
        }
        else
        {
            lastClickedButtonValue = jQ(buttonIdSelector).val();
            //change the text of the button
            jQ(buttonIdSelector).val(loadingMessage);
            //disable the decorated button
            jQ(buttonIdSelector).attr('disabled', 'disabled');
        }
    }
</script>

Files

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.