This is a migrated thread and some comments may be shown as answers.

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

1 Answer 137 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Achilles
Top achievements
Rank 1
Achilles asked on 06 Jul 2010, 02:15 PM
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!!!

1 Answer, 1 is accepted

Sort by
0
Achilles
Top achievements
Rank 1
answered on 07 Jul 2010, 03:48 PM
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> 
Tags
Ajax
Asked by
Achilles
Top achievements
Rank 1
Answers by
Achilles
Top achievements
Rank 1
Share this question
or