1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Public Control JQuery find

Public Control JQuery find

6 posts, 2 answered
  1. Bobby
    Bobby avatar
    8 posts
    Registered:
    04 Feb 2012
    14 Mar 2012
    Link to this post
    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>

    Thanks,
    Bobby
  2. MB
    MB avatar
    302 posts
    Registered:
    09 Jan 2005
    14 Mar 2012
    Link to this post
    Perhaps you are thinking of the jQuery selector $('#elementid')  ?
    Answered
  3. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    14 Mar 2012
    Link to this post
    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")
    Answered
  4. Bobby
    Bobby avatar
    8 posts
    Registered:
    04 Feb 2012
    14 Mar 2012
    Link to this post
    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.
  5. MB
    MB avatar
    302 posts
    Registered:
    09 Jan 2005
    15 Mar 2012
    Link to this post

    @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.

  6. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    15 Mar 2012
    Link to this post
    @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 :)
6 posts, 2 answered