$Find returns null

Question

I have the following JScript on a page

<script type="text/javascript">
    function ProcessButtonDisable() {
        var button = $find("<%=ProcessButton.ClientID %>");
        button.disabled = true;
            }
</script>

and later

<asp:Button ID="ProcessButton" Text="Process All" runat="server" OnClick="Process_Click" OnClientClick="ProcessButtonDisable()" />

when running the page and firing off the button i get

Microsoft JScript runtime error: Unable to set value of the property 'disabled': object is null or undefined

and the dynamic page has converted it to:

<script type="text/javascript">
    function ProcessButtonDisable() {
        var button = $find("ctl00_ctl00_BodyContentPlaceHolder_MainContentPlaceHolder_ProcessButton");
        button.disabled = true;
    }
</script>

<input type="submit" name="ctl00$ctl00$BodyContentPlaceHolder$MainContentPlaceHolder$ProcessButton" value="Process All" onclick="ProcessButtonDisable();" id="ctl00_ctl00_BodyContentPlaceHolder_MainContentPlaceHolder_ProcessButton" />

as the control is clearly defined and the client id seems to be returning the correct id i don't know whats wrong

Any help?

ps in case this is not clear from the code the purpose of this is to prevent he user from clicking on the and resending the request before the page has time to reload after the initial click

Answer 1

-1 to all the previous answers for assuming JQuery. $find is a function defined by the Microsoft AJAX Library. It "provides a shortcut to the findComponent method of the Sys.Application class" which gets "a reference to a Component object that has been registered with the application through the addComponent method". Try using $get() instead, which "Provides a shortcut to the getElementById method of the Sys.UI.DomElement class."

This page explores both functions in detail: The Ever-Useful $get and $find ASP.NET AJAX Shortcut Functions