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 -->
	<button id="recaptchaSubmit">Continue</button>
</form>

Box Function:

$("#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();
});

Overlay Close Function:

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

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

Aswerty

First of all your nested ajax function does the exact same thing as the outer ajax function. So I'm not really sure where you we're going with that.

What you need is an ajax function that does the reCapatcha submit for you so that you can perform actions based on the reCaptcha succeeding. When the reCaptcha succeeds you can the load the data from your server. The below code is what I would expect the code to look like (note I'm assuming the reCapatcha form is already rendered at this point):

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

    var reCaptchaInput = {}; // put in whatever data the reCaptcha server expects

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

    if ($.trim(vID)) {

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

        $.ajax({
            url: "whatever-the-recaptcha-url.is/",
            type: "POST",
            data: reCaptchaInput,
            success: function (data, textStatus, jqXHR) {

                // check if data indicates reCaptcha success here I guess

                $.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) {}
                });
            }
        });
    }

    e.stopPropagation();
});

To load the reCaptcha when clicking the contact just do:

$("#contact").on("click", "a", function(e) {
	e.preventDefault();
        // show the reCaptcha form
});

Now when the reCaptcha succeeds the function to load the data from your server is fired. Alternatively if the reCaptcha fails you can have a handler to show the user an error instead of loading the data they requested.

I hope that helps. Was a bit tricky working out exactly what your problem was. Also I'm sure there is numerous mistakes in my code - but this should get you to a place where you can load your data depending on the reCaptcha succeeding.

Anywhere I've added a comment is where you need to implement some code to do what the comment says.