How To Continue Form Submission After An AJAX Call?
Solution 1:
Short answer: You can't - not in this manner.
Some background: The callbacks you supply as arguments to functions such as $.post
are executed asynchronously. This means that you will return proceed
before your success callback has been executed, and proceed
will always be false
. With your breakpoint, if you wait until the success callback has executed, proceed
will be true
and all will be well.
So, if you want to submit the form after your ajax request has finished, you must submit it using javascript. This is pretty easy with jQuery, just do a jQuery $.post
with data: $("yourForm").serialize()
and url: yourForm.action
.
This is basically what you already are doing, you just have to repeat that call to the URL to which you actually want to post the data.
EDIT:
Another way would be to set an attribute on your form, say valid
, and in your submit
handler check that:
jQuery("#post").submit(function() {
if($(this).data("valid")) {
return true;
}
// Rest of your code
});
And in the success callback for your validation ajax request you would set/clear that attribute, and then submit:
$("#post").data("valid", true).submit();
EDIT:
You also want to do your "ajax-loading"/button enabling inside the callback for $.post
for the same reasons stated above - as it is, they will happen immediately, before your ajax call returns.
Solution 2:
Bind your button to a validation function instead of submit. If it passes validation, call submit().
Solution 3:
Wordpress has its own mechanism to process Ajax requests, using wp-admin/wp-ajax.php. This allows you to run arbitrary code on either side of the Ajax boundary without having to write the back and forth status-checking code and all that. Set up your callbacks and go....
Solution 4:
The real question is - why are you doing validation server-side? Why can't you load in the validation criteria before - as the post is being written? Then your validation can happen real-time and not on-submit.
jquery.post is performed asynchronously, which means the JS will continue before it gets the reply. You're stuck with Diodeus's answer - bind the button to validtion which then submits the form (which makes it not degrade well), or change your $.post to ajax and turn off async, which will force it to wait for response before proceeding...possibly locking up JS on your page until it times out.
$.ajax({
type: 'POST',
url: ajaxurl,
async:false,
data: data,
timeout:3000,
success: function(){
}
});
Post a Comment for "How To Continue Form Submission After An AJAX Call?"