disable-controls-during-ajax.md

title	page_title	description	slug	previous_url	tags	published	type	category	res_type
Disable Controls during AJAX Requests with the AjaxManager	Disable Controls During AJAX Requests with the AjaxManager	Learn how to disable controls during Ajax with the Telerik UI for AJAX AjaxManager.	ajaxmanager/how-to/disable-controls-during-ajax	ajax/how-to/disable-controls-during-ajax, controls/ajaxmanager/how-to/disable-controls-during-ajax	telerik, asp, net, ajax, manager, disable, controls, during, ajax	true	how-to	knowledge-base	kb

Environment

Product

Progress® Telerik® UI for ASP.NET AJAX AjaxManager

Description

How can I disable a single control during an AJAX update so that users are not able to use it before the response ends? How can I set a global flag to disable a control with the AjaxManager control?

Solution

To disable a control during an AJAX update, use the [OnRequestStart]({%slug ajaxmanager/client-side-programming/events/requeststart%}) and [OnResponseEnd]({%slug ajaxmanager/client-side-programming/events/responseend%}) client-side events. Then, change the disabled value.

The following example demonstrates how to prevent the interaction with a control during an AJAX request. Implementing the code will disable any control that has already started a request until its response ends.

<script type="text/javascript">
	function RequestStart(sender, args) {
	    args.EventTargetElement.disabled = true;
	}
	function ResponseEnd(sender, args) {
	    args.EventTargetElement.disabled = false;
	}        
</script>

<asp:Button ID="btnUpdate" runat="server" Text="Update" />
<asp:Label ID="Label1" runat="server"></asp:Label>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
	<AjaxSettings>
	<telerik:AjaxSetting AjaxControlID="btnUpdate">
	    <UpdatedControls>
	         <telerik:AjaxUpdatedControl ControlID="Label1" />
	    </UpdatedControls>
	</telerik:AjaxSetting>
	</AjaxSettings>
<ClientEvents OnRequestStart="RequestStart" OnResponseEnd="ResponseEnd" />
</telerik:RadAjaxManager>

If you need to disable AJAX until the current response finishes, no matter which control has started the first request and which is going to make a second one, you can set a global flag.

The following example demonstrates how to notify the user that an action is in progress.

	
var AjaxIsActive = false;
	function RequestStart() {
     if (!AjaxIsActive) {
	 AjaxIsActive = true;
	}
	else {
	alert('Wait for ajax to finish'); return false;
	 }
	}
	function ResponseEnd() {
	jaxIsActive = false;
	}
	

See Also

• [OnRequestStart]({%slug ajaxmanager/client-side-programming/events/requeststart%})

• [OnResponseEnd]({%slug ajaxmanager/client-side-programming/events/responseend%})