$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

now button has the value of [], and while it doesn't error it doesn't disable the button either — MikeT, Sep 09 '13 at 14:43
also, find returns an array....$.find()[0] would give you the button — Mr.Manhattan, Sep 09 '13 at 14:47

score 12 · Answer 1 · edited Jan 08 '18 at 19:32

12

-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

edited Jan 08 '18 at 19:32

Adam

2,422
18
29

answered Nov 21 '13 at 16:09

xr280xr

12,621
7
81
125

3

it seems rather petty to downvote everyone elses answers because they glossed over a point of complexity. a down votes is for when the answer provided is completely useless and wrong, so as your answer is mostly complaining about incorrect terminology with almost no effort to answer the original question yours is as deserving of a down vote as all the answers your down voted, so i can understand if they are retaliatory – MikeT Sep 15 '14 at 09:19
2

@MikeT It's not petty at all. It is the purpose of the down voting function. They are answering an assumed question, not the question that was asked. Terminology has nothing to do with it. $Find is from a completely unrelated javascript library; the MS AJAX JS library, not JQuery. My answer has 1 short sentence describing my down vote and why the other answers are wrong (which comes out to 10% of my answer, not "most"). Evidently that was too _little_, if anything, because you obviously haven't taken time to understand the question or the answers. – xr280xr Sep 15 '14 at 15:30
Here is the correct link: https://gsravisankar.blogspot.co.za/2010/12/ever-useful-get-and-find-aspnet-ajax.html – Dirk Strauss Feb 20 '17 at 10:04
@xr280xr I had to downvote yours because it doesn't necessarily answer the original question and assumes `$get` is a substitute for `$find` which it's not – Leo Aug 29 '22 at 02:24
@Leo Hmm, it's been 9 years, but it still seems to answer the question to me. OP was getting null when trying to get the button. I suggested `$find` was not the appropriate method to call and `$get` should get the reference to the button. That's not to suggest they are interchangeable, rather, the opposite. How would you suggest this answer can be improved? – xr280xr Aug 29 '22 at 16:34

Alaa.Kh · Answer 2 · 2021-09-27T12:07:28.740

4

$find is differ from $.find. The first one is provides a shortcut to the findComponent method of the Sys.Application class which defined by the Microsoft AJAX Library. while the second is API method from jQuery which get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

So, $find has to find Component not html DOM. and ajax Library has to be defined.

For more information:

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

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

edited Sep 27 '21 at 12:07

answered Sep 14 '14 at 08:30

Alaa.Kh

151
3

Clarity is important in programming, do you mean to be writing `$Find` or `$find`? – Nol Apr 04 '17 at 19:32

score -1 · Answer 3 · answered Sep 09 '13 at 14:45

-1

try this:

<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>

answered Sep 09 '13 at 14:45

Mr.Manhattan

5,315
3
22
34

returns Microsoft JScript runtime error: Unable to get value of the property 'attr': object is null or undefined – MikeT Sep 09 '13 at 15:06

score -2 · Answer 4 · answered Sep 09 '13 at 14:49

You have to select what you are "finding" in first. For example, if you select document then use the method "find" you should have the result you want.

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

theoski · Answer 5 · 2013-09-09T21:49:44.457

-3

disabled is not a jQuery object property it is a DOM element property. Try using either:

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

, or

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

edited Sep 09 '13 at 21:49

answered Sep 09 '13 at 14:53

theoski

109
1
5

Not overly relevant as if the object is null you can't change attr either – MikeT Sep 09 '13 at 15:14
NREs come from attempting to access properties from invalid implicit parameters (null in this case). But as you have found out from @[Karl Anderson]'s answer you were attempting to access a DOM property from a Microsoft AJAX library component object resulting from the [$find shortcut call](http://msdn.microsoft.com/en-us/library/bb397522.aspx). Karl's first two answers still didn't work for you because he too was trying to access a DOM property from a non-DOM (jQuery) object. – theoski Sep 09 '13 at 21:49

Karl Anderson · Accepted Answer · 2013-09-09T14:49:49.743

-5

You need to use the dot notation, as find() is a jQuery function, like this:

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

Also, if you are going to take the trouble to look up the DOM element in your jQuery logic, then do not bother wiring up the OnClientClick on the server control; either wire up the click event via jQuery or pass the element itself to the JavaScript function:

Using jQuery to wire up the click event (recommended):

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

Using the OnClientClick attribute to wire up the click event and pass the 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>

edited Sep 09 '13 at 14:49

answered Sep 09 '13 at 14:39

Karl Anderson

34,606
12
65
80

1

It is not recommended, because it unnecessarily couples the JavaScript to the DOM element in the markup itself. This clutters the markup, especially if you have multiple buttons that are handled by the same event handler code. Whereas with unobtrusive JavaScript, you could make a selector that applies the same click handler to several different buttons that share the same characteristic (i.e. being a button, or having the same `class` attribute). This makes the JavaScript logic separate from the actual markup and you do not need to have the same function call in multiple button tags. – Karl Anderson Sep 09 '13 at 15:58
It is just not recommended, but don't take that to mean you cannot do it, because it will work. There is a big push to keep JavaScript and HTML elements defined away from each other, but it comes with the inconvenience of having to look at two files or sections of files independently when debugging your code or worse debugging someone else's code. I probably should not have put the `recommendede` and `not recommended` comments in my answer. My apologies, but glad it worked for you. :-) – Karl Anderson Sep 09 '13 at 16:00
No worries its like the old saw about the difference between a novice and an expert, a novice doesn't know the rules and an expert knows when to ignore them. i'm a novice web developer so i need to learn the rules and the reasons for them – MikeT Sep 10 '13 at 10:15

$Find returns null

6 Answers6

Linked