How to continue form submission after an AJAX call? - javascript

I want to validate user entries on a WordPress post upon hitting the submit button, display an error message is there are problems, and submit the form if everything is OK. I have a PHP function that does the checking, returning true if data in form_data is OK, some error code otherwise. The following JavaScript issues the AJAX request, and was supposed to continue submitting the form upon successful checking, but it doesn't:
jQuery(document).ready(function() {
jQuery('#post').submit(function() {
var form_data = jQuery('#post').serializeArray();
var data = {
action: 'ep_pre_submit_validation',
security: '<?php echo wp_create_nonce( 'pre_publish_validation' ); ?>',
form_data: jQuery.param(form_data),
};
var proceed = false;
jQuery.post(ajaxurl, data, function(response) {
if (response.indexOf('true') > -1 || response == true) {
proceed = true;
} else {
alert("Error: " + response);
proceed = false;
}
});
jQuery('#ajax-loading').hide();
jQuery('#publish').removeClass('button-primary-disabled');
return proceed; //breakpoint here makes the code run
});
});
The code is adapted from a WPSE question, which originally didn't work for me as the form didn't get submitted. I found out that if the jQuery function bound to .submit() returns true, the form should be submitted, so that's what I tried to implement. With the code above, it doesn't seem to work at first (form doesn't get submitted when there are no errors), but upon close inspection with Firebug proceed seems to get the right result if a breakpoint is inserted at the return proceed line. It works as intended with valid data only if I wait it out a bit upon hitting the breakpoint, and then continue execution. If there are errors, the alert is issued without a problem.
What is the best way to handle this?
EDIT
Based on #Linus answer below, the following code works with both valid and invalid data:
jQuery(document).ready(function() {
jQuery('#post').submit(function() {
if(jQuery(this).data("valid")) {
return true;
}
var form_data = jQuery('#post').serializeArray();
var data = {
action: 'ep_pre_submit_validation',
security: '<?php echo wp_create_nonce( 'pre_publish_validation' ); ?>',
form_data: jQuery.param(form_data),
};
jQuery.post(ajaxurl, data, function(response) {
if (response.indexOf('true') > -1 || response == true) {
jQuery("#post").data("valid", true).submit();
} else {
alert("Error: " + response);
jQuery("#post").data("valid", false);
}
//hide loading icon, return Publish button to normal
jQuery('#ajax-loading').hide();
jQuery('#publish').removeClass('button-primary-disabled');
});
return false;
});
});

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.

Bind your button to a validation function instead of submit. If it passes validation, call submit().

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....

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

Related

ajaxForm resubmit if needed

I am using ajaxForm to send data to php file which runs in background, and some js functions will be checking if php file is running asynchroniously. So in case of some failure(internet/electricity went off), I want my user be able to retry the last form submission. So I found some ajax retry functions as this, best way to retry ajax but it is on the same ajax request, i need to be able to retry my ajax from another function. Is it even possible? Given that I am storing passed values in form.
$(document).ready(function(){
$('#form').ajaxForm({
target: '#ajax-response',
success: function(){
initAjaxCheck();
}
});
Check();
});
So, basically lockcheck() checks if process is still runing after page refresh/reload, and if any failure was detected with prevous run, it should be able to retry the form submission.
Here's js scripts:
function Check(){
$.ajax({
type:"POST",
url:"ajax.php",
data:{'flag':'Check'},
success:function(result){
if (result=="1") {
initAjaxCheck();
}
}
});
}
function initAjaxCheck(){
$.ajax({
type:"POST",
url:"ajax.php",
data:{'flag':'initProcCheck'},
success:function(data){
if (data=="1"){
timerCheck=setInterval(function(){
ajaxCheck(timerCheck);
},1000);
} else { //unsuccessful
var toRepeat = confirm ("Last try was unsuccessful. Retry?");
if (toRepeat){alert("retry");} else {alert("cancel");}
}
}
});
}
So if my user press RETRY, I should have to retry my ajaxForm submission.
I'm a little confused with what exactly you are asking, however I believe I somewhat understand.
Trigger a form submission.
$('#form').trigger("submit");
or
var event = jQuery.Event("submit");
$('#form').trigger(event);
To implement this in your code, simply add it after your confirm function.
var toRepeat = confirm ("Last try was unsuccessful. Retry?");
if (toRepeat){
alert("retry");
$('#form').trigger("submit");
} else {
alert("cancel");
}

Execute ajax request on form submit and don't wait for response

I want to make an AJAX request when the user attempts to submit a form. However, I don't want to wait for the response (I just want to trigger a script) and still submit the form immediately (or redirect the user).
I tried to to it this way (via jQuery):
$(document).ready(function()
{
$("#form").submit(function(e)
{
// save object reference
var form = this;
// prevent form submit
e.preventDefault();
// trigger ajax request
$.ajax({
url: 'ajax.php',
data: { ... },
cache: false
});
// submit form
form.submit();
// return false just in case
return false;
});
});
But this won't work, because the AJAX request will in fact not be sent by the browser, if the form is submitted immediately afterwards (via form.submit() ).
I am a bit puzzled here... is there really no way to fire an AJAX request and redirect the browser immediately afterwards?
It seems you create an infinite loop here. You are preventing the submit event and submitting it again at the end, but when you bind your function to the form's submission it will be called over and over. Instead, try to use Ajax states like success and complete; on success you submit data and on complete you redirect the page.

jQuery Ajax Race Condition?

I have the below JavaScript code that iterates through a list of textfields on a page. It takes the text in the textfield as a price, sends it to the server via an AJAX GET, and gets the parsed double back from the server. If any of the returned prices are less than an existing price, the form shouldn't submit.
The problem is that the form is submitting before all the AJAX requests are finished because of the non-blocking immediate response nature of the Ajax calls. I need to set up a wait() function (or a callback when all the Ajax methods are complete) but don't know how to do that with jQuery.
Any suggestions?
// .submitForm is a simple button type="button", not type="submit"
$(".submitForm").click(function(e){
var submittable = validatePrices();
if (submittable) {
$("#myForm").submit();
}
});
function validatePrices() {
var submittable = true;
$(".productPrice").each(function(){
var $el = $(this);
$.ajax({
type: "POST",
url: "/get_price.jsp",
async: false,
dataType: "html",
data: "price=" + $el.val(),
success: function(data)
{
var price = new Number(data.split("|")[1]);
var minPrice = new Number($el.data("min-price"));
if (price < minPrice)
{
$el.addClass("error");
$(".dynamicMessage").show().addClass("error").append("<p>ERROR</p>");
submittable = false;
}
}
});
return submittable;
});
}
You're already using synchronous AJAX (a really bad idea for your user experience), so that's not the problem. The problem is that you need to cancel the default action in the "submit" handler:
$(".submitForm").click(function(e){
var submittable = validatePrices();
e.preventDefault(); // this line
if (submittable) {
$("#myForm").submit();
}
});
Using a synchronous HTTP request back to your server for each separate field is going to make your site terribly slow. You're going to have to check the parameters at the server again when you submit the form anyway, so it'd be much better to just check then and return an error.
edit — now that the situation is clearer, I think that the way to proceed is to stop doing the AJAX validation checks completely. Why? Well, even if you perform those tests, you still need to make essentially the same validity tests when the form is actually submitted. You can't rely on the JavaScript validation code actually running, as in any other form validation scenario. If you're doing the validation at form submission time anyway, it'll save on a bunch of HTTP requests to just do it all at the same time.
You're not canceling the form submission. You have to work strictly with the ajax callbacks (if you would like to use them asynchronously, which would be nice).
$(".submitForm").click(function(e){
e.preventDefault();
validatePrices().done(function () { /* ajax success function here */
if (submittable) {
$("#myform").trigger('submit');
}
}
});
function validatePrices() {
var checks = [];
$(".productPrice").each(function(){
var $el = $(this);
checks.push($.ajax({
/* snip */
});
return $.when.apply(null, checks);
}

Using return true or return false on a link with target blank in jQuery

I have a form that has target="_blank"on submit.
I want to validate the form however, prior to it launching the new window. I could use window.open instead, but then it can be blocked by popup blockers.
The problem I'm having is the validation uses ajax and the time it takes to get the response for return false, is too long and it opens the new window.
$('.submit').click(function(){
$.post("/ajax/save/", { state: $('.state_field').val() },
function(data) {
if(data == 'false'){
alert('invalid state');
return false;
}else{
return true;
}
}
);
});
Would anyone have suggestions as how I can workaround this?
Thank you!
(You should probably use $("form").submit(function() {}) because that also catches when somebody presses Enter in a textfield.)
What you could do is
Don't include the target="_blank" in the form
catch the submission and block it (preferably using event.preventDefault();)
do the ajax call for validation
from within the callback: add the target="_blank" and submit the form again (you could use a check like $("form[target]").length == 1 to see if the form is being submitted for the second time.
While this all can make it work, you should think about validating the form right after the user enters data in each field, this will also improve the user experience a lot.
Use the preventDefault method of the event at the beginning of your click.
$('.submit').click(function(event){
event.preventDefault();
[...]
This will stop your form from submitting and is a better solution than using return false;.
If you need to do a redirect after the ajax call you can do that the standard way:
window.location.replace([url to redirect to]);
Popup blockers block the new window if they are opened in script execution context. If the window is opened through user action then it is allowed. You can try to use jQuery ajax in synchronous mode this will solve your other part of the question because the function will not wait untill ajax response comes and you return true/false conditionally.
$('.submit').click(function(){
$.ajax({
url: "/ajax/save/",
type: "POST",
async: false,
data: { state: $('.state_field').val() },
success: function(data) {
if(data == 'false'){
alert('invalid state');
return false;
}else{
return true;
}
}
);
});

How to send post with jquery onsubmit but still send form

I want to trigger this function, which uses the jquery's post method, when a form is submitted:
function update_point_session(){
$.post('/update_point_session/',
{session: true},
function(data){}
);
return true;
}
I uses the onsubmit to trigger it.
The problem is that it won't send it when the form is submitted. But if I return false; it will (though the form itself, of course, will not). It looks as if the $.post is not send before the page is directed to another one by the form..
So I think I somehow have to return true; AFTER the $.post. I tried to do this by putting it inside function(data){} but it did not work..
How can I send BOTH the post from jquery and from the form?
There are a couple of things you can do.
Make the AJAX synchronous
Since $.post is, according to the documentation, equivalent to
$.ajax({
type: 'POST',
url: url,
data: data,
success: success
dataType: dataType
});
You can simply replace $.post with the equivalent $.ajax call, and also add async: false to the options. This will submit the form with AJAX and then, due to the return true; from the function, will also let the browser post the form normally.
Submit the form only after the AJAX completes
This involves some event handler juggling:
// attach submit event handler to the form
$("#myform").submit(function() {
// Handler immediately detaches itself, so that
// we don't have an infinite loop when we call
// $(this).submit() ourselves below
$(this).unbind('submit');
// Do the AJAX
$.post(
'/update_point_session/',
{session: true},
function(data){
// When the AJAX completes, tell the browser
// to re-submit the form
$(this).submit();
}
);
// Prevent the browser from submitting it NOW,
// because the AJAX is still running
return false;
});
You must wait for the asynchronous post to complete before unloading the page. You can send back a redirect url from the server as json something like this:
$('form').submit(function(e){
$.post(this.action || '/update_point_session/', $(this).serialize(), function(data){
// send back a redirect url from the server
if(data.url) location.href = data.url;
});
e.preventDefault()
});
I would do something like this.
$('form#myFormId').submit(function(evt){
var form = $(this);
evt.preventDefault(); // Prevents default submission
$.post('/update_point_session/', {session: true}, function(data){
form.unbind('submit'); //Unbind js submit event
form.get(0).submit(); //submit the form
});
});

Categories