How to keep reCaptcha on screen after failed input - asp.net-mvc

Question

I have an asp.net MVC site with a bootstrap modal that has a reCaptcha form on it. It correctly validates the input upon submit, but if it's not valid, upon rendering the view so they can try again, the captcha disappears and the javascript console shows this error: "Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened." I have to refresh the page and reopen the modal to see the Captcha again.
Snippet of code containing the Captcha (public/private keys are in web.config):
<input type="hidden" name="ProductID" value="#Model.ProductID" />
<input type="hidden" name="UserTypeID" value="#Model.User.UserTypeID" />
#Html.Recaptcha(theme: Recaptcha.Web.RecaptchaTheme.Clean)
<div id="request-error-summary">
#Html.ValidationSummary(false, "All fields are required.")
</div>
Controller code upon submitting form:
public PartialViewResult SubmitRequest(RequestKitModel kitModel)
{
/* code removed for brevity */
RecaptchaVerificationHelper recaptchaHelper = this.GetRecaptchaVerificationHelper();
if (String.IsNullOrEmpty(recaptchaHelper.Response))
{
ModelState.AddModelError("", "Captcha answer cannot be empty.");
return PartialView("_Request", kitModel);
}
RecaptchaVerificationResult recaptchaResult = recaptchaHelper.VerifyRecaptchaResponse();
if (recaptchaResult != RecaptchaVerificationResult.Success)
{
ModelState.AddModelError("", "Incorrect captcha answer.");
return PartialView("_Request", kitModel);
}
/* code to ruun upon success of captcha input */
//close modal and return to results
return PartialView("_Confirmation");
}
Jquery Ajax call to SubmitRequest... I think the way I'm loading the partial view may be the culprit.
if ($('#request-form').valid()) {
$.ajax({
url: "/SubmitRequest",
type: "POST",
data: $("#request-form").serialize(),
success: function (data) {
//show the confirmation (thanks) modal
$("#request-modal .modal-content").html(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
window.location.href = '#Url.Action("Error")';
}
});
}
UPDATE: I changed it to use recaptcha_ajax.js since I am loading it after an ajax request. Now I get this error: "cannot set property 'innerhtml' of null" from the recaptcha_ajax.js file (cannot tell which object it's throwing this error on). Instead of calling Html.Recaptcha in the razor file, I now have this:
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<div id="recaptcha1"></div>
And the updated AJAX call:
$.ajax({
url: "/SubmitRequest",
type: "POST",
data: $("#request-form").serialize(),
success: function (data) {
//show the confirmation (thanks) modal
$("#request-modal .modal-content").html(data);
Recaptcha.create("6LedL_sSAAAAAJuozIfRiVfNOCHs-jlTn6NM4c-T",
"recaptcha1",
{
theme: "white",
callback: Recaptcha.focus_response_field
}
);
console.log("done loading html");
console.log('captcha control: ' + $("#recaptcha1").length);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
window.location.href = '#Url.Action("Error")';
}
});

Answer 1

Try and put the javascript reference
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
in your main layout, I got the same error you did because the javascript library wasn't fully loaded.
You should also check that the div exists in the callback.
I hope this helps,
Salvador