locked
Make reCaptcha display in form using updatepanel RRS feed

  • Question

  • User-1981066191 posted

    Hi!
    I need to display the Google reCaptcha using Ajax Update Panel if 3 bad logins are made. I'm using ASP.net Framework 4 with updatepanel.

    The steps are this

    1) User enter to my webpage

    2) He enter his user (harry) and password (potter)

    3) If he enter username and password wrong 3 times then reCaptcha will appears

    The problem: when the updatepanel make the postback to add the reCaptcha it never appears! If I press F5 (normal postback) it appears :(

    I have attached a very simple website example with the issue.

    Thank you!!!

    A project with the example HERE to download

    <%@ Page Language="vb" %>
    
    <%@ Register TagPrefix="recaptcha" Namespace="Recaptcha" Assembly="Recaptcha" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script language="VB" runat="server">
        
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            
            ActivateCaptchaIfBadLogins()
            
        End Sub
        
        Private Sub ActivateCaptchaIfBadLogins()
            
            If txtbadlogins.Text >= 3 Then
                divRecaptcha.Visible = True
            End If
            
        End Sub
        
    
        Protected Sub btnLogin_Click(ByVal sender As Object, ByVal e As System.EventArgs)
            
            If Not IsValid AndAlso Not recaptcha.IsValid Then
                txtbadlogins.Text += 1
                lblMsg.Text = "Incorrect captcha :'("
            Else
                If txtuser.Text = "harry" And txtpassword.Text = "potter" Then
                    lblMsg.Text = "You are logged in ok!"
                    txtbadlogins.Text = 0
                
                Else
                    txtbadlogins.Text += 1
                    lblMsg.Text = "User or password incorrect"
                End If
            End If
            
            ActivateCaptchaIfBadLogins()
            ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "CaptchaReload", "reloadRecaptcha()", True)
            UpdatePanelLogin.Update()
            
        End Sub
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
    
            <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
            <script type="text/javascript">
                function reloadRecaptcha() {
                    
                    Recaptcha._init_options(RecaptchaOptions);
                    if (RecaptchaOptions && 'custom' == RecaptchaOptions.theme) {
                        if (RecaptchaOptions.custom_theme_widget) {
                            Recaptcha.widget = Recaptcha.$(RecaptchaOptions.custom_theme_widget);
                            Recaptcha.challenge_callback();
                             
                        }
                    } else {
                        if (Recaptcha.widget == null || !document.getElementById('recaptcha_widget_div')) {
                            $('#cbCaptcha').show().html('<div id="recaptcha_widget_div" style="display:none"></div>');
                            Recaptcha.widget = Recaptcha.$('recaptcha_widget_div');
                             
                        }
                        Recaptcha.reload();
                        Recaptcha.challenge_callback();
                         
                    }
    
                }
    
                $(document).delegate('#btn1', 'click', function (event) {
                });
    
    </script>
        <form id="form1" runat="server">
        
        <input id="btn1" type="button" value="button" />
    
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanelLogin" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    Message:<asp:Label ID="lblMsg" runat="server" Text=""></asp:Label><br/>
            Bad logins counter <asp:TextBox ID="txtbadlogins" runat="server" Width="33px">9</asp:TextBox>
            <br/><br/><br/><br/>
            Username <asp:TextBox ID="txtuser" runat="server">harry</asp:TextBox><br/>
            Password <asp:TextBox ID="txtpassword" runat="server" TextMode="Password">potter</asp:TextBox><br/>
            <div id="divRecaptcha" runat="server" visible="false">
                <div id="cbCaptcha" style="display: none;">
                    <!-- for callback recaptcha reload -->
                </div>
                <recaptcha:RecaptchaControl ID="recaptcha" theme="white" runat="server" PublicKey="6LdBuOgSAAAAANbjWrJDRfh-meOLszgtPN3dA14n"
                    PrivateKey="6LdBuOgSAAAAAJUHgY32k6xXTC9Cr3d3_MG18LY2" />
            </div>
                    <asp:Button ID="btnLogin" runat="server" Text="Login" 
                        onclick="btnLogin_Click" />
                </ContentTemplate>
            </asp:UpdatePanel>
        
        </form>
    </body>
    </html>



    Saturday, October 26, 2013 5:48 PM