Control in UpdatePanel not found using $find

[Mike]

Hi,

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"<br>    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? I appreciate any help.

Thanks,
Dana

[Marin Bratanov]

Hello  Dana,

The _saveNewFileButton is a standard asp:Button controls, so it renders as an input element with type=submit. So, you must use $get() or document.getElementById() to get a reference to its DOM object in order to modify it. It does not offer such rich API like our controls, so setting the text must be done via its properties. You can start off from this basic example:

<asp:Button ID="_saveNewFileButton" runat="server" Text="Save"/>
<script type="text/javascript">
    var submitButton = document.getElementById('<%= _saveNewFileButton.ClientID %>');
    submitButton.value = 'Please Wait for Attachment Upload...';
    submitButton.setAttribute("disabled", "disabled");
</script>

Regards,

Marin Bratanov
Telerik