Templated Login control inside RadAjaxPanel -- Validation changes to server-side after first callback

2 posts, 0 answers
  1. Achilles
    Achilles avatar
    6 posts
    Member since:
    Aug 2012

    Posted 06 Jul 2010 Link to this post

    I'm using Visual Studio 2010 Ultimate/Framework 4.0 final and "Telerik RadControls for ASP.NET Ajax 2010.1.415.40" in a normal web application.
    I have a Templated asp:Login control inside a RadAjax Panel; like this:
                            <telerik:RadAjaxPanel ID="rap" runat="server" EnablePageHeadUpdate="false" LoadingPanelID="ralp" ClientEvents-OnRequestStart="function() {return false;}"> 
                                <asp:Login ID="l1" runat="server" onauthenticate="l1_Authenticate" onloggedin="l1_LoggedIn"> 
                                    <LayoutTemplate> 
                                        <fieldset> 
                                            <div class="field"> 
                                                <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName" /> 
                                                <asp:TextBox ID="UserName" runat="server" CssClass="text en" MaxLength="512" autocomplete="off" /> 
                                                <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" CssClass="validation-error"  
                                                    ValidationGroup="Login1" SetFocusOnError="true" EnableClientScript="true" /> 
                                            </div> 
                                            <div class="field"> 
                                                <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password" /> 
                                                <asp:TextBox ID="Password" runat="server" TextMode="Password" CssClass="text en"></asp:TextBox> 
                                                <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password" CssClass="validation-error"  
                                                    ValidationGroup="Login1" SetFocusOnError="true" EnableClientScript="true" /> 
                                            </div> 
                                            <div class="field"> 
                                                <asp:Label ID="RememberMeLabel" runat="server" Text="" AssociatedControlID="RememberMe" /> 
                                                <asp:CheckBox ID="RememberMe" runat="server" Text="" /> 
                                                <span class="validation-error">&nbsp;</span> 
                                            </div> 
                                            <asp:Panel ID="pnlCap" runat="server" Visible="false" class="field captcha"> 
                                                <asp:Label ID="lblEnterCaptchaCode" runat="server" AssociatedControlID="txtCaptchaCode" /> 
                                                <asp:TextBox ID="txtCaptchaCode" runat="server" CssClass="text en" Width="130" ValidationGroup="Login1" /> 
                                                <asp:RequiredFieldValidator ID="rfvCap" runat="server" ControlToValidate="txtCaptchaCode" CssClass="validation-error"  
                                                    ValidationGroup="Login1" SetFocusOnError="true" /> 
                                                <br /> 
                                                <br /> 
                                                <telerik:RadCaptcha ID="captcha" runat="server" ValidationGroup="Login1" CaptchaAudioLinkButtonText=""  
                                                    CaptchaTextBoxLabel="" EnableRefreshImage="True" CaptchaLinkButtonText="<span>تولید تصویر جدید</span>"  
                                                    ValidatedTextBoxID="txtCaptchaCode"> 
                                                    <CaptchaImage TextColor="#009900" EnableCaptchaAudio="True" FontFamily="Courier New" UseAudioFiles="True" LineNoise="Medium"  
                                                    UseRandomFont="False" ImageAlternativeText="کد امنیتی" Width="150" RenderImageOnly="True" /> 
                                                </telerik:RadCaptcha> 
                                            </asp:Panel> 
                                            <div class="buttons left"> 
                                                <asp:ImageButton ID="LoginButton" runat="server" CommandName="Login" CssClass="login-button" AlternateText="Log In" ImageUrl="http://cdn.samservice.dev/images/spacer.gif" 
                                                    ValidationGroup="Login1" /> 
                                            </div> 
                                            <div class="message-field"> 
                                                <asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal> 
                                            </div> 
                                        </fieldset> 
                                    </LayoutTemplate> 
                                </asp:Login> 
                            </telerik:RadAjaxPanel> 

    If I remove the ClientEvents-OnRequestStart="function() {return false;}" form RadAjaxPanel, the client-side validation only works the first time the page loads. The first time I use a wrong username/password to login, the page comes back with no validator attached! and from now on the page only will validate server-side.
    I tried almost everything I found around the internet and nothing seemed to be able to stop this behavior.
    The only solution I've came across is that return false on OnRequestStart!
    Is there something I'm doing wrong?

    Update: and this solution only works in firefox. Tested in IE and the faulty behavior persists...
    Update2: I just found out that after the first callback returns, Page_Validators is [ ] while it was [span#cph_l1_UserNameRequired.validation-error, span#cph_l1_PasswordRequired.validation-error] at the first load...
    I'll try to reconstruct it on ResponseEnd...
    Update3: It seems the whole mechanism is lost after the first callback. C# code:
    rap.ClientEvents.OnResponseEnd = String.Format("EnableValidators(['{0}', '{1}', '{2}']);", rfvCap.ClientID, rfvPW.ClientID, rfvUN.ClientID); 
    Javascript (jQuery) Code:
    function EnableValidators(list) { 
        //Page_Validators  
        var a = $(list).filter(function (index, el) { 
            return (document.getElementById(el) != null); 
        }).toArray(); 
        Page_Validators = jQuery.makeArray($(jQuery.map(a, function (el, i) { 
            return (document.getElementById(el)); 
        })).toArray()); 
    } 
     but the validationGroup is lost too; even if I reset the Page_Validators as above and call the Page_ClientValidate("Login1"); client-side function, the page stays valid!

    Somebody help!!!
  2.
  3. Achilles
    Achilles avatar
    6 posts
    Member since:
    Aug 2012

    Posted 07 Jul 2010 Link to this post

    OK
    Placing a dummy RadAjaxManager right before the RadAjaxPanel with settings to update a dummy non-existing validator will do the trick!
    But why!!?
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> 
            <AjaxSettings> 
                <telerik:AjaxSetting AjaxControlID="LoginButton"> 
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="an_id_you_will_never_use_in_the_page" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting>               
            </AjaxSettings> 
        </telerik:RadAjaxManager> 
Back to Top