Form Submission vs AJAX Polling Call

Question

Following up on my question from the other day, I've run into another thing that now I've spent too many hours banging my head against.

Mostly, I'm having trouble getting the SUCCESS form to submit. I tried this as well:

jQuery form submit

Here's the code in a semi-functional fiddle:

http://jsfiddle.net/ZcgqV/

Essentially what happens is this:

1. I bind a method to the form's submission via onSubmit (rather than click)
2. On submit, it calls a remote server via jQuery .ajax() call
3. If the response is "PENDING", retry every 1s, nine times
4. On failure, don't submit the form
5. On success, submit the form

No matter what I try, I can't get the form to either submit when I want it to without going into a loop, or not submit immediately while it tries the remote server.

~Frustrated-trying-100-things-that-fail-ly yours...

Here's the code directly in case you dislike fiddles:

var retries = 0;
var success = false;
var token = "toki wartooth is not a bumblebee";

$(document).ready(function() {
    // Attach the action to the form
    $('#tehForm').attr('onSubmit', 'onsubmit_action(event)');
});

function async(fn) {
    setTimeout(fn, 1000);
}

function pollServer() {
    $.ajax({
        type: "POST",
        cache: "false",
        url: "/remoteCall",
        dataType: "json",
        data: {
            ref_token: token
        }
    }).done(function(data, code, jqXHR) {

        switch (data.status) {
        case "SUCCESS":
            alert("Success");
            success = true;

            // --> HERE IS WHERE I WANT THE FORM TO SUBMIT <--

            break;

        case "PENDING":
            if (retries < 9) {
                retries += 1;
                async(function() {
                    pollServer();
                });
            } else {
                alert("Failed after 9 tries");
            }
            break;

        case "ERROR":
            alert("Error");
            break;

        default:
            alert("Some kind of horrible error occurred");
            break;
        }

    }).fail(function(jqXHR, textStatus) {
        var statusCode = jqXHR.status;
        alert("Request failed: " + statusCode + " " + textStatus);
    });

}

function onsubmit_action(event) {
        pollServer();
        if (success === false) {
            // RETURN FALSE DIDN'T WORK, SO I FOUND THIS
            event.preventDefault();
        }
}​

EDIT:

Again, the real problem here is that I stop submission of the form. On SUCCESS, I want the form to submit. Currently if I use .submit() in SUCCESS, the AJAX is called again, starting the process over. What I want is the ACTION of the FORM to fire on SUCCESS only.

Answer 1

Trying to use as much of the original code as possible; here is a solution:

Post form with post back http://jsfiddle.net/tpm7v/4/

Post form via Ajax http://jsfiddle.net/tpm7v/5/

    var retries = 0,
    token = "toki wartooth is not a bumblebee",
    sendRequest,
    handelResponse,
    postFormToServer,
    $theForm = $('#tehForm');

$(document).ready(function() {
    // Attach the action to the form
    $theForm.bind('submit', onsubmit_action);
});

sendRequest = function() {
    $.ajax({
        type: "POST",
        cache: "false",
        url: "/remoteCall",
        dataType: "json",
        data: {
            ref_token: token
        },
        success: handelResponse
    });
};

postFormToServer = function() {
    $.ajax({
        type: "POST",
        cache: "false",
        url: "/remoteCallToTakFormData",
        dataType: "json",
        data: $form.serialize(),
        success: function() {
            alert('success!');
        }
    });
};

handelResponse = function(data, code, jqXHR) {
    switch (data.status) {
        case "SUCCESS":
            postFormToServer();
            break;

        case "PENDING":
            if (retries < 9) {
                retries += 1;
                setTimeout(sendRequest , 1000);
            } else {
                alert("Failed after 9 tries");
            }
            break;

        case "ERROR":
            alert("Error");
            break;

        default:
            alert("Some kind of horrible error occurred");
            break;
        }
};

function onsubmit_action(evt) {
    evt.preventDefault();
    sendRequest();
}
​
​

Keep in mind I am going off the code your provided. You should be able to port this to work with your actual implementation. You may also want to try something like https://github.com/webadvanced/takeCommand to help clean up all the Ajax calls.

Answer 2

Please see my comment above for more information, but I think the problem you're seeing here is this:

Every time pollServer() fires, it's not only doing another ajax call, but it's prepping to do 9 possible ajax calls every second based on the retries loop. Since you're then setting another pollServer() call with the async() method, you're basically compounding your ajax calls out of control. You want to get the ajax call out of your retry loop, then you should at least be only getting 1 request a second, not 1, then 2, then 3, etc. I may have read the code wrong, but this is my best guess on what you're seeing.

UPDATE: I'm not sure my explanation was clear, so I thought I'd add some additional info. Basically, every time pollServer() is called and gets a PENDING response, it calls async, which registers a setTimeout(). setTimeout() keeps running every second, doing pollServer(), which then calls asynch, which registers another setTimeout() which also runs every second. Now you have two functions, which each then call setTimeout(), assuming they're still getting PENDING as a response from the server. So after 2 rounds of failed calls, you have 4 setTimeout() calls each firing an ajax call (and a new setTimeout) every second.

Answer 3

First off it should be: $('#tehForm').submit(onsubmit_action); or $('#tehForm').on("submit",onsubmit_action); or something like that. Never use the string form to pass a function. It uses the evil eval statement.

Next, after POST the data is already submitted. That is the whole reason for post. Why do you need all sorts of error handling in the done section. Fail should handle error handling.

If you are asking about how to try again after a timeout, try this: Is it possible to check timeout on jQuery.post()?

I believe timeout will fall into fail.

So try this:

var retries = 0,
    max_tries = 9,
    success = false,
    token = "toki wartooth is not a bumblebee";

$(document).ready(function() {
    // Attach the action to the form
    $('#tehForm').on("submit",submit_the_form);
});

function submit_the_form(e){
   var dfd = $.ajax({
       url : "sendTokenPolling", 
       data : {"token":token},
       timeout : 5000 //you may want 1000, but I really think that is too short
    });
   dfd.done(function(){
      //success, form posted
   });
   dfd.fail(function(){
      //did not work/timedout
      if (retries < max_tries){
         retries += 1;
         submit_the_form(e);
      }
   });
}