Make reCaptcha display in form using updatepanel RRS feed

  • Question

  • User-1981066191 posted

    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
        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 :'("
                If txtuser.Text = "harry" And txtpassword.Text = "potter" Then
                    lblMsg.Text = "You are logged in ok!"
                    txtbadlogins.Text = 0
                    txtbadlogins.Text += 1
                    lblMsg.Text = "User or password incorrect"
                End If
            End If
            ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "CaptchaReload", "reloadRecaptcha()", True)
        End Sub
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
            <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
            <script type="text/javascript">
                function reloadRecaptcha() {
                    if (RecaptchaOptions && 'custom' == RecaptchaOptions.theme) {
                        if (RecaptchaOptions.custom_theme_widget) {
                            Recaptcha.widget = Recaptcha.$(RecaptchaOptions.custom_theme_widget);
                    } 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');
                $(document).delegate('#btn1', 'click', function (event) {
        <form id="form1" runat="server">
        <input id="btn1" type="button" value="button" />
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            <asp:UpdatePanel ID="UpdatePanelLogin" runat="server" UpdateMode="Conditional">
                    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>
            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 -->
                <recaptcha:RecaptchaControl ID="recaptcha" theme="white" runat="server" PublicKey="6LdBuOgSAAAAANbjWrJDRfh-meOLszgtPN3dA14n"
                    PrivateKey="6LdBuOgSAAAAAJUHgY32k6xXTC9Cr3d3_MG18LY2" />
                    <asp:Button ID="btnLogin" runat="server" Text="Login" 
                        onclick="btnLogin_Click" />

    Saturday, October 26, 2013 5:48 PM