Search code examples
asp.netjqueryterminologyiscriptcontrol

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


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 %>");
}

Solution

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