Search code examples
asp.nettelerikupdatepanel

Control in UpdatePanel not found using $find


I have a complicated page but I created a simple ASP.NET page with the issue. I have telerik RadAsyncUpload control and a button inside an UpdatePanel as shown:

<asp:UpdatePanel ID="_updatePanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
    ...
    <telerik:RadAsyncUpload ID="fileUpload" runat="server" MaxFileInputsCount="1"  OnClientFilesSelected="fileUpload_ClientFilesSelected" /><br />         

    <asp:Button ID="_saveNewFileButton" runat="server" OnClick="_saveNewFileButton_Click"
    Text="Save"/>

    </ContentTemplate>
</asp:UpdatePanel>

When a file is selected I want to disable the _saveNewFileButton and change the text to "Please Wait for Attachment Upload..." but I can't seem to get hold of the button reference in javascript:

var FilesUpdateInterval = null;

 //Handles client side FilesSelected event for _newFileUploadButton.
 function fileUpload_ClientFilesSelected(sender, args) {
     //disable the click event for submit button during upload
     var submitButton = $find('<%= _saveNewFileButton.ClientID %>');
     submitButton.set_text('Please Wait for Attachment Upload...')
     submitButton.set_readOnly(true);
     if (FilesUpdateInterval == null) {
         FilesUpdateInterval = setInterval(function () { FileCheckForUploadCompletion(); }, 500);
     }
 }

I am getting submitButton is null error. I tried putting this javascript code outside the updatepanel and inside ContentTemplate with same result. Obviously whatever I am doing is wrong. How do I get hold of the control that is in updatepanel in javascript?

EDIT: I find out that $find works with only telerik controls. So, I have to either use document.getElementById function or JQuery with something like Steve specified. Also, I have to use RegisterClientScriptBlock. I will test with Steve suggestion and then accept the answer.


Solution

  • short version - use $get() or document.getElementById(), as regular HTML elements are not IScriptControls, so $find() will not give you anything, and they don't have the rich client API you are trying to use.

    For example

                var submitButton = $get('<%= _saveNewFileButton.ClientID %>');
                submitButton.setAttribute("value", "Please Wait for Attachment Upload...");
    

    Option 2 - use RadButton.