$ Find returns null

Question

I have the following JScript on the 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 I start the page and turn off the button, I get

Microsoft JScript runtime error: cannot set property to "disabled": object is null or undefined

and the dynamic page converts 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" /> 

since the control is well defined and the client id seems to return the correct id, I don't know what is wrong.

Any help?

ps in case this is not clear from the code, the purpose of this is to prevent it from clicking and resubmitting the request before the page has time to reload after the first click

Answer 1

You need to use dot notation, since find() is a jQuery function, for example:

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

Also, if you try to find the DOM element in your jQuery logic, don't worry about connecting OnClientClick to the server control; either hook the click event through jQuery or pass the element itself to a JavaScript function:

Using jQuery to hook a click event (recommended):

 <script type="text/javascript"> $(document).ready(function() { $("#<%=ProcessButton.ClientID%>").click(function() { $(this).disabled = true; }); }); </script> 

Using the OnClientClick attribute to connect a click event and passing an element (not recommended):

 <asp:Button ID="ProcessButton" Text="Process All" runat="server" OnClick="Process_Click" OnClientClick="ProcessButtonDisable(this)" /> <script type="text/javascript"> function ProcessButtonDisable(elem) { elem.disabled = true; } </script> 

Answer 2

-1 for all previous answers suggesting 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 receives a "reference to the Component object that was registered in the application using the addComponent method". Instead, try $ get () , which "Provides a shortcut to the getElementById method of the Sys.UI.DomElement class."

Both functions are covered in detail on this page: Useful functions $ get and $ find ASP.NET AJAX for quick access

Answer 3

$Find is different from $.find . The first one is a shortcut to the findComponent method of the findComponent class, which is defined by the Microsoft AJAX library. while the second API method from jQuery, which gets the children of each element in the current set of matched elements, is filtered by a selector, jQuery object, or element.

So, $Find should find the component, not the html DOM. and the ajax library must be defined.

For more information:

http://msdn.microsoft.com/en-us/library/vstudio/bb397441(v=vs.100).aspx

http://api.jquery.com/find/

Answer 4

try the following:

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

[edit] or

 <script type="text/javascript"> function ProcessButtonDisable() { $("#<%=ProcessButton.ClientID %>").attr("disabled", "disabled"); } </script> 

Answer 5

You must first choose what you "find." For example, if you select a document, then use the "find" method, which should have the desired result.

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

Answer 6

disabled not a property of the jQuery object, it is a property of the DOM element. Try using:

 $('selector').get(0).disabled = true 

or

 $('selector').attr('disabled','disabled');