$('#<%= txtFirstName.ClientID%>'). What do $ and # do in this code?

Question

$('#<%= txtFirstName.ClientID%>').show();

Trying to send ClientId to external Javascript file using server tags as a parameter

<input type="text" ID="txtFirstName" runat="server" maxlength="50"
                    class="DefaultTextbox" style="width:180px;"
                    value="First Name" 
                    onfocus="ControlOnFocus('First Name',$('#<%= txtFirstName.ClientID%>').show())"
                    onblur="ControlOnBlur('First Name')"/>

function ControlOnFocus(CompareString,ControlId)
{
    alert(ControlId);

}

Answer 1

Bud, $ is an alias for some javascript framework like jquery or prototype, the # represents an ID at the DOM. Just like CSS, those frameworks allow you to select elements using CSS syntax (. for classes, # for ids, etc). So $("#test") works almost like getElementById('test')

Answer 2

$() is a short alias for the main jQuery function, also called jQuery(). You pass it a CSS selector, and in CSS, # means "the HTML element with ID...". That ID is in the ClientID variable in this program, apparently. The show() call then makes the named HTML element appear.

Answer 3

It seems your script uses jQuery.

$('#<%= txtFirstName.ClientID%>').show() will return the jQuery object containing the element with attribute id=<%=txtFirstName.ClientID%>, and not the ClientID value.

I guess what you really mean is this :

<input type="text" ID="txtFirstName" runat="server" maxlength="50"
     class="DefaultTextbox" style="width:180px;"
     value="First Name" 
     onfocus="ControlOnFocus('First Name','<%= txtFirstName.ClientID%>')" // <= pass only the ClientID to your function
     onblur="ControlOnBlur('First Name')"/>

function ControlOnFocus(CompareString,ControlId)
{
 $('#'+ControlId).show(); // <= do the show action here, in your function
 alert(ControlId);

}

Answer 4

The jQuery syntax always begins with $, the # indicates that function show() is to be applied on the element whose Id is provided. Lets say the id is txtFirstName, then writing $('#txtFirstName') is equivalent to document.getElementById('txtDirstName') in classic Javascript. This will select the element from the Document Object Model(DOM) by the id provided. Once the element is selected, different jQuery functions can be executed on that reference. The show function makes the control/element visible. Similarly you can use .hide() to hide the element.