Control in UpdatePanel not found using $find

2 posts, 1 answers
  1. Mike
    Mike avatar
    2 posts
    Member since:
    Sep 2013

    Posted 02 Dec 2014 Link to this post

    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
  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 02 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top