jQuery Overlay Ajax/Delegation Issue

Ziycon

When I click on a link with the ID `contact` the below `Box Function` function is kicked off and initially it returns the `Overlay Code` into the div `#overlay #innerWrapper` which is grand, my issue is now I want the recaptcha to display until it validates with Google (the user ticks the box or enters the text verification) but once that validates it should load the data the user wants to see.

I can load the recaptcha and the result data via an Ajax call individually no problem and all is ok, the problem is the logic I'm using in the `Box Function` below, I know that event delegation has a part to play but is there an easy way instead of having nested Ajax calls.

I think one of the issues is I'm unable to get the POST value from the recaptcha when I click `recaptchaSubmit` button as the post is kicked off via jQuery and it doesn't know about the recaptcha.

I hope I've explained this as best I can, if you need any more information that I've overlooked just let me know. I appreciate any help, stumped as what to do.

Overlay Code

---

<form method="POST" action="?" id="recaptcha">
	<p>Please complete this security challenge to continue.</p>
	<!-- Google Recaptcha -->
        <div class="g-recaptcha" data-sitekey="{public_key}"></div>
	<button id="recaptchaSubmit">Continue</button>
</form>

Box Function

---

[HTML]$("#contact").on("click", "a", function(e) {
e.preventDefault();

var vID = $(this).data("id");

if ($.trim(vID))
{
var vData = {aid:3,petId:vID};

$("#overlay #innerWrapper").html("<div class=\"loading\"></div>");
$("#overlay").css("display", "inline");

$.ajax(
{
url : "../../core/ajax.php",
type: "POST",
data : vData,
beforeSend: function()
{
$(".loading").show();
},
success: function(data, textStatus, jqXHR)
{
var vResponse = data;
vResponse = vResponse.split(",");

$("#overlay #innerWrapper").html("<h2>" + vResponse[0] + ":</h2><div>" + vResponse[1] + "</div>");

$("#overlay #innerWrapper").on("click", "button", function(e) {
e.preventDefault();

$.ajax(
{
url : "../../core/ajax.php",
type: "POST",
data : vData,
beforeSend: function()
{
$(".loading").show();
},
success: function(data, textStatus, jqXHR)
{
var vResponse = data;
vResponse = vResponse.split(",");

$("#overlay #innerWrapper").html("<h2>" + vResponse[0] + ":</h2><div>" + vResponse[1] + "</div>");
},
complete: function()
{
$(".loading").hide();
},
error: function (jqXHR, textStatus, errorThrown)
{}
});
});
},
complete: function()
{
$(".loading").hide();
},
error: function (jqXHR, textStatus, errorThrown)
{}
});
}

e.stopPropagation();
});[/HTML]

Overlay Close Function

---

[HTML]$("body").click(function(e) {
var $overlay = $("#overlay");

if( $overlay.has($(e.target)).length < 1)
{
$overlay.slideUp("fast");
}
});[/HTML]

Talisman

Where is the Google reCAPTCHA div added in your code? e.g.
[PHP]<div class="g-recaptcha" data-sitekey="aba123bab456aba123bab456aba123bab456"></div>[/PHP]

Both Ajax calls seem to post the same data to the server (vData):

vData = {aid:3,petId:vID};

If the first Ajax response populates a form in the overlay with the div, then the inner Ajax request needs to pass the additional data to the server so it can be verified with Google.

Ziycon

Talisman wrote: »

Where is the Google reCAPTCHA div added in your code? e.g.
[PHP]<div class="g-recaptcha" data-sitekey="aba123bab456aba123bab456aba123bab456"></div>[/PHP]

Both Ajax calls seem to post the same data to the server (vData):

vData = {aid:3,petId:vID};

If the first Ajax response populates a form in the overlay with the div, then the inner Ajax request needs to pass the additional data to the server so it can be verified with Google.

I've added the recaptcha div in now, I had just a comment in my example above.

With regard to both ajax calls posting the same data that is correct as there is a PHP function behind it all the returns the recaptcha code or the data to be viewed if the recaptcha code passes validation. So I need to capture the recaptcha response and added it to my post request when I click the the button 'recaptchaSubmit', but I've been unable to capture the recaptcha response!?

Hope that makes sense.

Talisman

Have you looked at the documentation for displaying the reCAPTCHA widget? You can dynamically add the widget to your form using JavaScript.

My point about the same data being passed to the Ajax request is that you aren't passing the data for the recaptcha field (g-recaptcha-response) to the server. When you click the checkbox on the widget, the content for the recaptcha field is generated and the g-recaptcha-response field is dynamically inserted into the HTML.

You only submit two fields: {aid:3, petId:vID}

The server needs the content of the g-recaptcha-response form field, which is validated against the Google API. Here's the basic outline of the server side code in PHP:

[PHP]<?php
$a_id; $pet_id; $recaptcha;
$google_secret = "YOUR SECRET FOR THE GOOGLE API";
if ( isset( $_POST ) ) {
$a_id = $_POST;
}
if ( isset( $_POST ) ) {
$pet_id = $_POST;
}
if ( isset( $_POST ) ) {
$recaptcha = $_POST;
}
if ( !$recaptcha ) {
// No captcha provided so don't proceed
echo 'Please complete the captcha widget!';
exit;
}
// Verify the captcha submission with Google
$api_response = file_get_contents( "https://www.google.com/recaptcha/api/siteverify?secret=&quot; . $google_secret . "&response=" . $recaptcha . "&remoteip=" . $_SERVER );
if ( $api_response.success == false) {
// Google thinks we are dealing with spam
echo 'Spam alert!';
} else {
// Do the thing with the data : $a_id and $pet_id
}
?>[/PHP]

Your code needs to be modified to add the g-recaptcha-response field content to the posted data.

Ziycon

Thanks for the further feedback Talisman, maybe I'm not explaining it as well as I could but the issue really is that I'm unable to get the recaptcha response in the current setting as the page isn't being posted until the the button 'recaptchaSubmit' is clicked so I'm unsure how I can inject the reCaptcha response into the form so that when the button 'recaptchaSubmit' is clicked that the response is posted.