Public Control JQuery find
Hi,
I am developing a public control and am trying to toggle my view based on the visibility of a checkbox. However, whenever I using the jquery find function, it returns null and does not find the element I am looking for. It seems straight forward but I am not sure what the problem is. Below is my code. Can you tell me what I am doing wrong?
<%@ Control Language="C#" AutoEventWireup="true" %><%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Fields" Assembly="Telerik.Sitefinity" %><%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %><%@ Register TagPrefix="sfvalidation" Namespace="Telerik.Sitefinity.Web.UI.Validation.Definitions" Assembly="Telerik.Sitefinity"%><sf:ResourceLinks ID="resourcesLinks" runat="server"> <sf:ResourceFile JavaScriptLibrary="JQuery"> </sf:ResourceFile></sf:ResourceLinks><fieldset class="sfregisterFormWrp"> <asp:Panel ID="formContainer" runat="server" DefaultButton="registerButton"> <ol class="sfregisterFieldsList"> <sf:TextField ID="businessName" runat="server" DataFieldName="Name" DataItemType="Telerik.Sitefinity.DynamicTypes.Model.Businesses.Business" DisplayMode="Write" Title="Business Name" CssClass="sfregisterField sfregisterBusinessName" WrapperTag="li" > <ValidatorDefinition MessageCssClass="sfError" Required="true"/> </sf:TextField> <telerik:RadButton ID="btnCheckBox" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox" Text="Is Claimed" AutoPostBack="false" OnClientLoad="OnClientLoad" OnClientClicked="OnClientClicked" Checked="true"> </telerik:RadButton> </ol> <ol id="claimed" class="sfregisterFieldsList"> <sf:TextField ID="firstName" runat="server" DataFieldName="FirstName" DataItemType="Telerik.Sitefinity.Security.Model.SitefinityProfile" DisplayMode="Write" Title="<%$ Resources:Labels, FirstName %>" CssClass="sfregisterField sfregisterFirstName" WrapperTag="li" /> <sf:TextField ID="lastName" runat="server" DataFieldName="LastName" DataItemType="Telerik.Sitefinity.Security.Model.SitefinityProfile" DisplayMode="Write" Title="<%$ Resources:Labels, LastName %>" CssClass="sfregisterField sfregisterLastName" WrapperTag="li" /> <sf:TextField ID="email" runat="server" DataFieldName="Email" DisplayMode="Write" Title="<%$ Resources:Labels, Email %>" CssClass="sfregisterField sfregisterEmail" WrapperTag="li"> <ValidatorDefinition MessageCssClass="sfError" Required="true" ExpectedFormat="EmailAddress"/> </sf:TextField> <sf:TextField ID="userName" runat="server" DataFieldName="UserName" DisplayMode="Write" Title="<%$ Resources:Labels, UserName %>" CssClass="sfregisterField sfregisterUserName" WrapperTag="li"> <ValidatorDefinition MessageCssClass="sfError" Required="true"/> </sf:TextField> <sf:TextField ID="password" runat="server" DisplayMode="Write" Title="<%$ Resources:Labels, Password %>" IsPasswordMode="true" CssClass="sfregisterField sfregisterPassword" WrapperTag="li"> <ValidatorDefinition MessageCssClass="sfError" Required="true"/> </sf:TextField> <sf:TextField ID="reTypePassword" runat="server" DisplayMode="Write" Title="<%$ Resources:UserProfilesResources, ReTypePassword %>" IsPasswordMode="true" CssClass="sfregisterField sfregisterConfirmPassword" WrapperTag="li"> <ValidatorDefinition MessageCssClass="sfError"> <ComparingValidatorDefinitions> <sfvalidation:ComparingValidatorDefinition ControlToCompare="password" Operator="Equal" ValidationViolationMessage="<%$ Resources:ErrorMessages, CreateUserWizardDefaultConfirmPasswordCompareErrorMessage %>"/> </ComparingValidatorDefinitions> </ValidatorDefinition> </sf:TextField> </ol> <ol id="unclaimed" style="display:none"> unclaimed </ol> <asp:Panel ID="errorsPanel" runat="server" CssClass="sfErrorSummary" Visible="false"/> <div class="sfregisterLnkWrp"> <asp:Button runat="server" ID="registerButton" Text="<%$ Resources:UserProfilesResources, Register %>" CssClass="sfregisterSaveLnk"/> </div> </asp:Panel> <sf:SitefinityLabel id="successMessageLabel" runat="server" WrapperTagName="div" CssClass="sfSuccess" /> <asp:Panel ID="configurationErrorsPanel" runat="server" CssClass="sfErrorSummary" Visible="false" > <div runat="server" id="smtpSettingsErrorWrapper" Visible="false"> <asp:Label runat="server" id="smtpConfigurationErrorTitle" Text="<%$ Resources:ErrorMessages, CannotSendEmails %>"/> <asp:Label runat="server" id="smtpConfigurationError"></asp:Label> </div> </asp:Panel></fieldset><script type="text/javascript"> //<![CDATA[ function OnClientLoad(sender, eventArgs) console.info("Load event: <strong>" + sender.get_text() + "</strong> is loaded."); sender.set_autoPostBack(false); function OnClientClicked(sender, eventArgs) var checked = sender.get_checked(); if (checked) $find("#claimed").show(); $find('#unclaimed').hide(); else $find("#claimed").hide(); $find('#unclaimed').show(); //]]></script> Perhaps you are thinking of the jQuery selector $('#elementid') ?
Totally, I'd agree with MB :)
$find is the MSAjax way to find a client component, and it doesn't need a # sign as I believe it's implied...while a plain $ is jQuery. You really only need $find when you're trying to get a reference to a RadControls client functions. Other than that, stay away from MSAjax, stick to jQuery.
So like if you wanted your RadButton you'd do $find("btnCheckBox"), but if you wanted just a jquery reference use $("#claimed")
Thank you guys for your response. I did not realize I was not actually using the jquery function but the msajax function. That cleared everything up.
@Steve
Just as a side-bar, I don't believe that # is in any way implied by $find()
MS-Ajax $find() is a shortcut to Sys.Application.findComponent() - which is expecting to be passed the id of the component to find - usually the associated elementId.
jQuery $('#elementid') is a selector (based on CSS selector syntax) and # indicates that this is an id attribute to select, as opposed to some alternative selector condition such as $('.className') or $('[attribute=value]') or $('tagName') or any of the supported selectors.
@MB
Yeah I know, what I mean by implied is that the $find function is looking for an element ID, so the pound is not required to denote it's an ID, unlike (as you pointed out) jQuerys selector syntax :)