ReCaptcha does not work with ajax

sriv1211

What is happening is that the Captcha image is not displayed from an Ajax call, however a direct access works. All other form elements are displayed correctly though.

This is the script from an Ajax call:

<style>body { font-size: 12px;} </style>
<div id="form">
<form action="" method="post">
<input type="hidden" name="register" value="1">
<p>E-Mail ID: <input type="text" name="email" value=""></p>
<p>Choose a username: <input type="text" name="username" value=""></p>
<p>Password: <input type="password" name="password" value=""></p>
<p>Enter the Captcha below:</p>
<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6LfPJwgAAAAAAI-8F3Lp11umLntMpXov8Xfz4QfU"></script>
<noscript>
	<iframe src="http://api.recaptcha.net/noscript?k=6LfPJwgAAAAAAI-8F3Lp11umLntMpXov8Xfz4QfU" height="300" width="500" frameborder="0"></iframe><br>
	<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
	<input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript><input type="submit" value="submit" />
</form>
</div>

And this is the direct one:

<p>Enter the Captcha below:</p>
<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6LfPJwgAAAAAAI-8F3Lp11umLntMpXov8Xfz4QfU"></script>
<noscript>
	<iframe src="http://api.recaptcha.net/noscript?k=6LfPJwgAAAAAAI-8F3Lp11umLntMpXov8Xfz4QfU" height="300" width="500" frameborder="0"></iframe><br>
	<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
	<input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript><input type="submit" value="submit" />
</form>
</div>

Thanks

johanafm

There's no XHR call as far as I can tell. But anyway, it looks like it should work if you fix your html code. Run the html through a validator and get rid of the errors, then try again.

sriv1211

Thanks for your suggestion. I have validated everything, but it still doesn't work by an Ajax call. Could it be something to do with the javascript they have. Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Reg</title>
<script type="text/javascript" src="http://api.recaptcha.net/js/recaptcha_ajax.js"></script>

<link rel="stylesheet" type="text/css" href="http://mysite.com/css/core.css" />
<link rel="stylesheet" type="text/css" href="http://mysite.com/css/core.css" />
<style type="text/css">body { font-size: 12px;} iframe {height: 300px; width: 500px; border: 0px;} </style>
</head>

<body>
<div id="form">
<form action="" method="post">
<p>E-Mail ID: <input type="text" name="email" value="" /><input type="hidden" name="register" value="1" /></p>
<p>Choose a username: <input type="text" name="username" value="" /></p>
<p>Password: <input type="password" name="password" value="" /></p>
<p>Enter the Captcha below:</p>
<div style="background:#063;" id="recaptcha"><script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6LfPJwgAAAAAAI-8F3Lp11umLntMpXov8Xfz4QfU"></script></div>
<p><input type="submit" value="submit" /></p>
</form>
</div>
</body></html>

johanafm

Using the code you posted, I see an image.

sriv1211

<?php if (!$_GET['call']) { ?>
<script type="text/javascript">
function ajaxCall() {
var xmlhttp;
if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
else { alert("Your browser does not support XMLHTTP!"); }
xmlhttp.onreadystatechange=function(){

if(xmlhttp.readyState==4) {
document.getElementById('ajaxCall').innerHTML = xmlhttp.responseText; 
// alert(xmlhttp.responseText);
} else {
document.getElementById('ajaxCall').innerHTML = 'loading...';
}
}
xmlhttp.open("GET",'<?= $_SERVER['REQUEST_URI'] ?>?call=1');
xmlhttp.send(null);
}
</script>
<a href="#" onclick="ajaxCall();">Click for call</a>
<div id="ajaxCall">This is where the Ajax call should be</div>
<?php } else { ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Reg</title>
<script type="text/javascript" src="http://api.recaptcha.net/js/recaptcha_ajax.js"></script>

<link rel="stylesheet" type="text/css" href="http://mysite.com/css/core.css" />
<link rel="stylesheet" type="text/css" href="http://mysite.com/css/core.css" />
<style type="text/css">body { font-size: 12px;} iframe {height: 300px; width: 500px; border: 0px;} </style>
</head>

<body>
<div id="form">
<form action="" method="post">
<p>E-Mail ID: <input type="text" name="email" value="" /><input type="hidden" name="register" value="1" /></p>
<p>Choose a username: <input type="text" name="username" value="" /></p>
<p>Password: <input type="password" name="password" value="" /></p>
<p>Enter the Captcha below:</p>
<div style="background:#063;" id="recaptcha"><script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6LfPJwgAAAAAAI-8F3Lp11umLntMpXov8Xfz4QfU"></script></div>
<p><input type="submit" value="submit" /></p>
</form>
</div>
</body></html>
<?php } ?>

Please try it with the <?php if ($GET['call']) { ?> and then change it to <? if (!$GET['call']) { ?> to see the difference between if it was and wasn't called from ajax. Thanks for you continued support.

johanafm

I believe there are two issues at hand. The first one is easy to solve. element.innerHTML should always be avoided. Iirc, it has been deprecated, and it won't do the trick for you here.

However, if your ajax call got a json response which evaluates to an array corresponding to the nodes you need instead of one long string of html code, you could use appendChild and build the DOM tree yourself. I leave building the array structure server side and going through it properly client side to you. If you need a generic solution, it will take some time. Else, you can create the structure by hand of course.

Once that is in place

var d = document;
var div = d.getElementById('ajaxCall');

// somewhere when going through your data, this should happen
var rec = d.createElement('div');
rec.id = 'recaptcha';

var scr = d.createElement('script');
scr.type = 'text/javascript';
scr.src = 'http://api.recaptcha.net/challenge?k=6LfPJwgAAAAAAI-8F3Lp11umLntMpXov8Xfz4QfU';

div.appendChild(rec);
rec.appendChild(src);

So far so good. But, since http://api.recaptcha.net/challenge?k=6LfPJwgAAAAAAI-8F3Lp11umLntMpXov8Xfz4QfU contains document.write, you're screwed.

https://developer.mozilla.org/en/DOM/document.write wrote:
Writing to a document that has already loaded without calling document.open() will automatically perform a document.open call.

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75233634 wrote:
open
Open a document stream for writing. If a document exists in the target, this method clears it.