Catpcha doesn't render on RadPanel

[Daniel Bichuete]

Hi,

 We are facing an weird problem. We have a RadCaptcha inside an asp:login template and have one RadPanel where this asp:login is inside.
 When the Captcha Generate New Machine is asked for, them an AJAX request is started but the interesting is the return: no image at all, captcha is there but the div's responsible for the images are not.
 Sample code:

    <form id="frmLogin" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
            HttpHandlerUrl="~/SBP.UI.WebResource.axd">
    </telerik:RadScriptManager>
    <div id="login" align="center">
<div style="position:absolute; left:0; right:0; top:0; height:35px; background-color:#d9d9d9; text-align:center">
    <img src="/App_Themes/login/logo_sbp.png" width="93" height="35" />

</div>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Black">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
            DefaultLoadingPanelID="RadAjaxLoadingPanel1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="LogOnSBP">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="LogOnSBP"
                            LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelRenderMode="Inline" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxPanel ID="rpLogin" runat="server">
            <asp:Login ID="LogOnSBP" runat="server"
                FailureText="Acesso negado" FailureTextStyle-CssClass="falhaAcesso" Orientation="Horizontal"
                LoginButtonText="Entrar"
                OnAuthenticate="LogOn1_Authenticate" PasswordLabelText="Senha:"
                PasswordRequiredErrorMessage="Pass required"
                TitleText="" UserNameLabelText="Login:"
                UserNameRequiredErrorMessage="User required"
                VisibleWhenLoggedIn="False" DestinationPageUrl="~/Default.aspx"
                DisplayRememberMe="False" >
                <CheckBoxStyle HorizontalAlign="Left" />
                <LoginButtonStyle CssClass="btLogin" />
                <LayoutTemplate>
                    <table border="0" cellpadding="1" cellspacing="0"
                        style="border-collapse:collapse;">
                        <tr>
                            <td>
                                <table border="0" cellpadding="0">
                                    <tr>
                                        <td align="left">
                                            <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName"><asp:RequiredFieldValidator CssClass="erroFail" ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="User required" ToolTip="Usuário necessário" ValidationGroup="LogOnSBP">*</asp:RequiredFieldValidator> Login:</asp:Label>
                                            <asp:TextBox CssClass="tiLogin" ID="UserName" runat="server"></asp:TextBox>
                                        </td>
                                        <td align="left" style=" padding-left:10px;">
                                            <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password"><asp:RequiredFieldValidator CssClass="erroFail" ID="PasswordRequired" runat="server" ControlToValidate="Password" ErrorMessage="Pass required" ToolTip="Senha necessária" ValidationGroup="LogOnSBP">*</asp:RequiredFieldValidator> Senha:</asp:Label>
                                            <asp:TextBox CssClass="tiSenha" ID="Password" runat="server" TextMode="Password"></asp:TextBox>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width:180px; position:relative; height:80px;">
                                            <telerik:RadCaptcha ID="rcBotProtection" runat="server"
                                                ProtectionMode="InvisibleTextBox">
                                            </telerik:RadCaptcha>

                                            <telerik:RadCaptcha ID="rcCaptcha"  runat="server"  CaptchaLinkButtonText=""
                                                ValidatedTextBoxID="txtCaptcha"  ValidationGroup="LogOnSBP"
                                                CaptchaTextBoxLabel=""  CssClass="rcAreaCaptcha" EnableRefreshImage="true"
                                                HttpHandlerUrl="~/SBP.UI.WebResource.axd" Height="24px" Width="128px"
                                                ImageStorageLocation="Cache" IgnoreCase="False">
                                               <CaptchaImage ImageCssClass="rcCaptchaImage" TextLength="5" LineNoise="High" BackgroundNoise="High" RenderImageOnly="true"/>
                                            </telerik:RadCaptcha>
                                        </td>
                                        <td style="width:180px; padding-left:10px; text-align:left">
                                        <div style="float:right"><asp:Label ID="Label1" runat="server"  CssClass="lblCaptcha" AssociatedControlID="rcCaptcha">Digite os caracteres:</asp:Label><asp:TextBox CssClass="tiCaptcha" ID="txtCaptcha" runat="server"></asp:TextBox><asp:RequiredFieldValidator CssClass="erroFail" ID="CaptchaRequired" runat="server" ControlToValidate="txtCaptcha" ErrorMessage="Pass required" ToolTip="Captcha necessário" ValidationGroup="LogOnSBP">*</asp:RequiredFieldValidator></div>
                                        </td>
                                    </tr>
                                  <tr>
                                        <td colspan="2" style="text-align:center">
                                            <asp:Button ID="Login" runat="server" CommandName="Login" CssClass="btLogin" Text="Entrar" ValidationGroup="LogOnSBP" />
                                            <span style="display:block; color:#D00"><asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal></span>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </LayoutTemplate>
                <InstructionTextStyle Font-Italic="True" ForeColor="Black" />
                <LabelStyle HorizontalAlign="Left" />

                <FailureTextStyle CssClass="falhaAcesso"></FailureTextStyle>
            </asp:Login>
        </telerik:RadAjaxPanel>
    </div>
    </form>

Does anyone imagine what is going on ? Tought about something related to Javascript...


Best regards,

Daniel Bichuete

[Daniel Bichuete]

Hi,

 After changing the login box from an ASP.NET Login template to a "normal" code without the Login component I worked perfectly.

Sample code:

    <form id="frmLogin" runat="server">
    <telerik:RadScriptManager ID="rsManager" runat="server"
            HttpHandlerUrl="~/SBP.UI.WebResource.axd">
    </telerik:RadScriptManager>
    <telerik:RadAjaxManager ID="raManager" runat="server"
        DefaultLoadingPanelID="rpLoading">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="btLogin">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rpLogin" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="rcCaptcha">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rpLogin" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="rpLoading" runat="server" Skin="Default">
    </telerik:RadAjaxLoadingPanel>
    <div id="loginbox" align="center">
        <div style="position:absolute; left:0; right:0; top:0; height:35px; background-color:#d9d9d9; text-align:center">
        <img alt="SBP Logo" src="/includes/img/logo_sbp.png" width="93" height="35" />
        </div>
        <telerik:RadAjaxPanel ID="rpLogin" runat="server">
                    <table border="0" cellpadding="1" cellspacing="0"
                        style="border-collapse:collapse;">
                        <tr>
                            <td>
                                <table border="0" cellpadding="0">
                                    <tr>
                                        <td align="left">
                                            <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName"><asp:RequiredFieldValidator EnableClientScript="true" CssClass="erroFail" ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="User required" ToolTip="Usuário necessário" ValidationGroup="LogOnSBP">*</asp:RequiredFieldValidator> Login:</asp:Label>
                                            <asp:TextBox CssClass="tiLogin" ID="UserName" runat="server"></asp:TextBox>
                                        </td>
                                        <td align="left" style=" padding-left:10px;">
                                            <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password"><asp:RequiredFieldValidator EnableClientScript="true" CssClass="erroFail" ID="PasswordRequired" runat="server" ControlToValidate="Password" ErrorMessage="Pass required" ToolTip="Senha necessária" ValidationGroup="LogOnSBP">*</asp:RequiredFieldValidator> Senha:</asp:Label>
                                            <asp:TextBox CssClass="tiSenha" ID="Password" runat="server" TextMode="Password"></asp:TextBox>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width:180px; position:relative; height:80px;">
                                            <telerik:RadCaptcha ID="rcBotProtection" runat="server"
                                                ProtectionMode="InvisibleTextBox">
                                            </telerik:RadCaptcha>

                                            <telerik:RadCaptcha ID="rcCaptcha"  runat="server"  CaptchaLinkButtonText=""
                                                ValidatedTextBoxID="txtCaptcha"  ValidationGroup="LogOnSBP"
                                                CssClass="rcAreaCaptcha" EnableRefreshImage="true"
                                                HttpHandlerUrl="~/SBP.UI.WebResource.axd" Height="24px" Width="128px"
                                                ImageStorageLocation="Cache" IgnoreCase="False">
                                               <CaptchaImage ImageCssClass="rcCaptchaImage" TextLength="5" LineNoise="High" BackgroundNoise="High" RenderImageOnly="true"/>
                                            </telerik:RadCaptcha>
                                        </td>
                                        <td style="width:180px; padding-left:10px; text-align:left">
                                        <div style="float:right"><asp:Label ID="Label1" runat="server"  CssClass="lblCaptcha" AssociatedControlID="rcCaptcha">Digite os caracteres:</asp:Label><asp:TextBox MaxLength="5" CssClass="tiCaptcha" ID="txtCaptcha" runat="server" ValidationGroup="LogOnSBP"></asp:TextBox></div>
                                        </td>
                                    </tr>
                                  <tr>
                                        <td colspan="2" style="text-align:center">
                                            <asp:Button ID="btLogin" runat="server" CssClass="btLogin" Text="Entrar"
                                                ValidationGroup="LogOnSBP" onclick="btLogin_Click" />
                                            <span style="display:block; color:#D00"><asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal></span>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
        </telerik:RadAjaxPanel>
    </div>
    </form>

May someone point the way we should do for working inside an ASP.NET Login template ?

Best regards,

Daniel Bichuete

[Pero]

Hi Daniel,

You should not use both RadAjaxPanel, and RadAjaxManager to ajaxify the same controls. I inspected your code, and I think that you only need the RadAjaxPanel to ajaxify the Login Control. Please remove the RadAjaxManager from the page, and see if you are still getting the problems.

Sincerely yours,
Pero
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.