CODEWITHSUNDEEP
asp.net.netjscript.net
MikeT
MikeT

Reputation: 5500

$Find returns null

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

Upvotes: 7

Views: 10175

Answers (6)

Alaa.Kh
Alaa.Kh

Reputation: 151

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

Upvotes: 4

xr280xr
xr280xr

Reputation: 13302

-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

Upvotes: 12

theoski
theoski

Reputation: 109

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');

Upvotes: -3

maccettura
maccettura

Reputation: 10818

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>

Upvotes: -2

Karl Anderson
Karl Anderson

Reputation: 34846

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>

Upvotes: -5

Mr.Manhattan
Mr.Manhattan

Reputation: 5504

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>

Upvotes: -1

Related Questions