Why can I not use $find in a jQuery function?

Question

I am using a combination of jQuery and IScriptControls and I don't appear to be able to use $find in any jQuery functions.

Take the following, for example, I can use $get and $, but I cannot use $find.

    // Configure the toolbar groups
    $(document).ready(function()
        {

            // Returns the control
            var works1 = $get("ctl00_ContentPlaceHolder1_uwt_MainNavigation");
            var works2 = $("#ctl00_ContentPlaceHolder1_uwt_MainNavigation");

            // Returns null
            var broken = $find("ctl00_ContentPlaceHolder1_uwt_MainNavigation");

        }
    );

When my page loads I need to call a method that needs to get the selected tab from my MainNavigation Tab control (It's a Infragistics UltraWebTab, but I have tested with my own IScriptControls to ensure that's it's not an Infragistics issue).

The tab index can only be obtained by using $find. What's the reason I cannot use $find and how can I get the control in a $find fashion?

// Configure the toolbar groups
$(document).ready(function()
    {

        // Get the UltraWebTab Control
        var tabControl = $find("<%=uwt_MainNavigation.ClientID %>");
        var index = tabControl.get_selectedTab();
        ToolBarShowGroup(index);

    }
);

The above is what I'm trying to do, where ToolBarShowGroup calls a jQuery function to show and hide toolbars.

Also, whilst I'm hear, if someone could correct my terminology where it comes to IScript Controls.. are they 'Ajax Controls' or 'Extender Controls' or what? I've seen them referred to as all different things. The controls have the ol' MyCompany.MyControl.prototype declarations.

EDIT: The following works perfectly, but I'd rather it was inside the $(document).ready function.

// Use the Ajax Load Methods
function pageLoad()
{
    var ajaxControl= $find("<%=myControlHere.ClientID %>");
}

Answer 1

It seems that you are using jQuery with other libraries which also redefine the $ function. You could use the noConflict function which forces you to always use jQuery instead of $.

jQuery.noConflict();


// Configure the toolbar groups
jQuery(document).ready(function() {
    // Returns the control
    var works1 = $get("ctl00_ContentPlaceHolder1_uwt_MainNavigation");
    var works2 = jQuery("#ctl00_ContentPlaceHolder1_uwt_MainNavigation");
    // Returns null
    var broken = $find("ctl00_ContentPlaceHolder1_uwt_MainNavigation");
});

jQuery(document).ready(function() {
    // Get the UltraWebTab Control
    var tabControl = $find("<%=uwt_MainNavigation.ClientID %>");
    var index = tabControl.get_selectedTab();
    ToolBarShowGroup(index);
});

Answer 2

I am not sure of why you're having this problem, but why don't you just use the jQuery object instead? Like:

var mainNav = $("#ctl00_ContentPlaceHolder1_uwt_MainNavigation");

Or if you want the DOM object instead of the jQuery object, you can write as:

var mainNav = $("#ctl00_ContentPlaceHolder1_uwt_MainNavigation")[0];

Answer 3

This should work:

$(document).find("#elementid")

Or if you're calling it inside an event handler then this is even better:

$(this).find("#elementid")

I think the idea with the find function is to find descendants of a parent control. And so it doesn't seem to work if you don't specify the parent.

However, from the looks of it, you don't need to use find for what you're doing. Why not simply do this?

$("#elementid")

Answer 4

What about redefining the $find function outside of document.ready

var FIND_FUNCTION = $find;

$(document.ready) { 
   ...
   var result = FIND_FUNCTION("ctl00_ContentPlaceHolder1_uwt_MainNavigation");
}

this should fix the scoping problem you seem to be having.

Answer 5

It appears that jQuery's $(document).ready fires before the Ajax controls are constructed.

The way I got this working was to use the following JavaScript method which is fired by the Ajax framework:

function pageLoad()
{
    // $find() works in here
}

pageLoad() fires after $(document).ready, so it appears that when jQuery's function fires to say the document is ready... it isn't actually all ready?