I have seen a couple of other posts on here regarding the use of Recaptcha with ASP.net UpdatePanels but have not yet found an answer that solves my problem.
Here is my ASPX code :
<asp:UpdatePanel ID="updRecaptcha" runat="server" UpdateMode="Always">
<ContentTemplate>
<recaptcha:RecaptchaControl ID="btnrecaptcha" runat="server" Theme="clean" PrivateKey"<%$ Resources: General, CaptchaPrivateKey %>" PublicKey="<%$ Resources: General, CaptchaPublicKey %>" />
<asp:Label ID="recaptchaerror" runat="server" style="color: Red;"/>
</ContentTemplate>
</asp:UpdatePanel>
So the Recaptcha control lives within a user control that uses several .Net validation controls (e.g. RequiredFieldValidator). I need to valdiate the Recaptcha and the ASP.net controls before allowing the process to continue.
If any of the validation fails (Recaptcha or .Net) then the Recaptcha control disappears. Looking at the HTML source, the control isn't loading at all after the Postback - eventhough I am telling the UpdatePanel to update.
I can't reload the page completely as this all appears as an overlay on top of the page and there are other form fields on the page behind.
Please help!
Edit:
From C# when the Recaptcha fails I am calling this code :
ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "InvalidRecaptcha", "alert('Recaptcha Failed');Recaptcha.reload();alert('Recaptcha Reloaded');", true);
Both of the alert statements fire but the Recaptcha still does not load.
Forget the ScriptManager. All you need is this script in the page. Change accordingly for your identifiers:
<script type="text/javascript">
// RECAPTURE CODE FOR RELOADING AFTER INCORRECT ENTRY
if (typeof Sys != 'undefined') {
var requestManager = Sys.WebForms.PageRequestManager.getInstance();
requestManager.add_endRequest(function(sender, args) {
$('<div id="recaptcha_widget_div"/>').appendTo('#recaptcha_widget_div2');
if (typeof Recaptcha != 'undefined') {
Recaptcha.create(recaptcha_key, "recaptcha_widget_div",
{
theme: "red",
callback: Recaptcha.focus_response_field
});
}
});
}