Difference between $get and $find

In my previous blogs I have made use of $get and $find javascript methods. These are new shortcut methods available in ASP.NET AJAX. To use these methods one has include ScriptManager in an aspx page. What are these two methods all about? Lets see one by one.

$get

$get is the shortcut method for document.getElementById. If you put a break point in the $get function and step into the function you can see the following code.

var $get = Sys.UI.DomElement.getElementById = function Sys$UI$DomElement$getElementById(id, element) {      var e = Function._validateParams(arguments, [         {name: "id", type: String},         {name: "element", mayBeNull: true, domElement: true, optional: true}     ]);     if (e) throw e;     if (!element) return document.getElementById(id);     if (element.getElementById) return element.getElementById(id);     var nodeQueue = [];     var childNodes = element.childNodes;     for (var i = 0; i < childNodes.length; i++) {         var node = childNodes[i];         if (node.nodeType == 1) {             nodeQueue[nodeQueue.length] = node;         }     }     while (nodeQueue.length) {         node = nodeQueue.shift();         if (node.id == id) {             return node;         }         childNodes = node.childNodes;         for (i = 0; i < childNodes.length; i++) {             node = childNodes[i];             if (node.nodeType == 1) {                 nodeQueue[nodeQueue.length] = node;             }         }     }     return null; }

From the above code one can infer that the signature of the shortcut method is something like this.

$get(id, element)

The function argument “id” takes a string value where one can pass the id of the element to be retrieved. “element” is an optional parameter, if passed the code will try to find a control inside the element if it supports getElementById else it will loop through all the child nodes and match the id of the child node with the id passed as the function argument. Below sample code shows the usage of the $get.

//Getting the ASP.NET server control' id using the ClientID. var txtCntl = $get('<% =txtChange.ClientID%>'); //Getting a control which is not a server control var divCntl = $get('contentDiv'); //Passing the id of the control as well the control in which the controls needs to be searched. var dropDownCntl = $get('<% =ddCountries.ClientID %>', divCntl); --Html tag for the above controls is pasted below-- <form id="form1" runat="server">     <div id="contentDiv">         <asp:DropDownList ID="ddCountries" runat="server">         </asp:DropDownList>         <asp:TextBox ID="txtChange" runat="server"></asp:TextBox>         <asp:Button ID="Button1" runat="server" Text="Button" />            </div>     <asp:ScriptManager ID="ScriptManager1" runat="server">     </asp:ScriptManager> </form>

In the above code we have seen the different ways of retrieving a control using the $get function. If you see the javascript code pasted above one can see in the first line we are trying to retrieve a ASP.NET server control using inline server code where we are using ClientID property to retrieve the system generated ID for the server control. In the second line we are using the id of the Div tag to retrieve the div control. Finally in the third line we are making use of ClientID and then passing the div control retrieved in the second line as the second argument to $get function. What happens in the third approach is that the $get function tries to find the control inside the div tag. So that’ about the $get function.

$find

$find is the shortcut method for “Sys.Application.findComponent(id, parent)”. The function takes id as a string parameter and also the control in which the component needs to be searched. The second parameter is optional. If provided it will look for the component in the component or element passed as an argument. The signature of the method is as follows.

$find(id, parent)

The method looks for components registered with the addComponent javascript method. If you put a debug point and step into the function you can see the below code.

function Sys$_Application$findComponent(id, parent) {     var e = Function._validateParams(arguments, [         {name: "id", type: String},         {name: "parent", mayBeNull: true, optional: true}     ]);     if (e) throw e;     // Need to reference the application singleton directly beause the $find alias     // points to the instance function without context. The 'this' pointer won't work here.     return (parent ?         ((Sys.IContainer.isInstanceOfType(parent)) ?             parent.findComponent(id) :             parent[id] || null) :         Sys.Application._components[id] || null); }

From the above code you can see that the code first checks whether the parent element is of type IContainer if it is then it tries to find the component within the parent component else it returns the component from the _components array in the Sys.Application object.

When to use $get and $find?

$get javascript shortcut method can be used instead of document.getElementById whereas $find can be used to find extender controls. If you use $get to retrieve extender controls like ValidatorCalloutExtender, AutoCompleteExtender etc it will return null.

So that's the difference between $get and $find.