ASP.NET AJAX $find method failes when used in jQuery’s $(document).ready() method

I’m trying to find a tree using ASP.NET AJAX’s client-side framework. I also use jQuery for doing any JavaScript operation after the DOM is ready. my code is like:

$(function(){
    var tree = $find('treeId');
});

Here, tree simply is null. But when I try to find the tree on click of one of elements, it’s not null:

$(function(){
    $('saveButton').click(function(){
        var tree = $find('treeId');
    }):
});

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

this worked for me with Telerik controls:

$telerik.$(document).ready(function () {
    var tree = $telerik.$find("<%=RadTreeView1.ClientID%>");
});

see this http://www.telerik.com/help/aspnet-ajax/introduction-using-jquery.html

Method 2

Try using ASP.NET Ajax DOM Ready.

Sys.onReady(function() {
    //DOM is ready to access and use
    var tree = $find('treeId');
});

Method 3

I have had problems with the telerik controls and ClientIDMode="Static" before. I simply removed this attribute and used $find('<%= Radtree1.ClientID %>') and it worked.

Edit:
Following on from the accepted answer, you can set the default $ to use jquery by pointing it to the telerik $.

window.$ = $telerik.$

If you do that on the site.master (or anywhere global) you’ll be able to use jquery as normal.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0