JQuery callback on function

Question

I have the following action:

   $('.sub_outworker').live('click', function() {

                var input = $(this);
                var current_div = input.parents('div.report');
                var current_div_id = current_div.attr('id');
                var replace_div = current_div.children('div').first();
                var submission = submit_form(input, replace_div);
                var i = 0;
}

The submit_form() function looks like this:

function submit_form(input, replace_div) {
            var form = input.parents('form');

            loading_gif(replace_div);

             $.ajax({
                type: 'POST',
                url: form.attr('action'),
                data: 'ajax=true&' + form.serialize(),
                success: function(data) {
                    get_json();

                    if(data == 'success') {
                        return 'success';
                    }
                    else {
                        return 'failed';
                    }
                }
            });
        }

I want to check whether submission == failed and if it does run submit_form again (ie. give the function a second chance to work - mainly because it occasionally fails validation due to a mismatch in tokens). I'm not sure how to go about this though!

That probably explains why I couldn't get my attempts to work earlier! — bland_dan
– bland_dan, Commented Jan 5, 2012 at 22:06
Once the success callback has completed is it possible to return something, or do any subsequent actions also need to be placed in the callback? — bland_dan
– bland_dan, Commented Jan 5, 2012 at 22:07
@MДΓΓ: Well, even deferred objects only accept callbacks. So you can say everything has to handled with callbacks if you deal with asynchronous code. — Felix Kling
– Felix Kling, Commented Jan 5, 2012 at 22:21

Community · Accepted Answer · 2017-05-23 12:03:14Z

If you just want to run it one more time, the easiest (and IMO cleanest) way might be to use deferred objects ^[docs]:

function submit_form(input, replace_div) {
    var deferred = new $.Deferred();
    var form = input.parents('form');

    loading_gif(replace_div);

     $.ajax({
        type: 'POST',
        url: form.attr('action'),
        data: 'ajax=true&' + form.serialize(),
        success: function(data) {
            get_json();

            if(data == 'success') {
                deferred.resolve(data);
            }
            else {
                deferred.reject(data);
            }
        }
    });

    return deferred;
}

Then you can do:

var request = submit_form(input, replace_div);
request.fail(function() {
    submit_form(input, replace_div);
}).done(function() {
   // request was successful, do something
});

Deferred objects provide great flexibility with asynchronous calls and let you easily decouple code. Of course if you want to see the repeated attempt to make the Ajax call as a "feature" of the submit_form function or if you want to repeat it more than once, then @Matt's answer seems to be the better way.

Matt Ball · Accepted Answer · 2012-01-05 22:01:56Z

2

It has to be done in the $.ajax() callback.

$('.sub_outworker').live('click', function() {

    var input = $(this);
    var current_div = input.parents('div.report');
    var current_div_id = current_div.attr('id');
    var replace_div = current_div.children('div').first();
    submit_form(input, replace_div);
}

function submit_form(input, replace_div) {
    var form = input.parents('form');

    loading_gif(replace_div);

     $.ajax({
        type: 'POST',
        url: form.attr('action'),
        data: 'ajax=true&' + form.serialize(),
        success: function(data) {
            get_json();

            if(data == 'success') {
                submit_form.failCount = 0;
            }
            else if (!submit_form.failCount) {
                submit_form.failCount++;
                submit_form(input, replace_div);
            }
        }
    });
}

answered Jan 5, 2012 at 22:01

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

5 Comments

Felix Kling Over a year ago

It could also be interesting to utilize deferred objects to be more flexible, but this is a simple solution which works. +1 :)

Joseph Humfrey Over a year ago

Looks like we posted similar answers. Only difference I can see is that I restructured slightly to avoid re-serialising the data on the form...

Felix Kling Over a year ago

@bland: Ooook, with so much support ;) My original solution suggested to use the deferred object returned by $.ajax but that would only fail if the request itself fails, not when you just get a different value than success. You can still use your own deferred object though. See my updated answer.

bland_dan Over a year ago

@MДΓΓБДLL was a close run thing, have used Felix deferred object suggestion

Matt Ball Over a year ago

@bland_dan no worries, I agree that his solution is cleaner for a one-off retry.

Joseph Humfrey · Accepted Answer · 2012-01-05 22:06:02Z

Could you do something like this? Note, I'm not 100% sure what you're expecting to get back from the server, or exactly how your page is structured.

function submit_form_ajax(serializedData, numAttempts) {

     numAttempts--;

     $.ajax({
        type: 'POST',
        url: form.attr('action'),
        data: 'ajax=true&' + serializedData,
        success: function(data) {
            get_json();

            if(data !== 'success') {
                if( numAttempts >= 1 ) {
                    submit_form_ajax(serializedData, numAttempts-1);
                }
            }
        }
    });

}

function submit_form(input, replace_div) {
    var form = input.parents('form');

    loading_gif(replace_div);

    submit_form_ajax(form.serialize(), 2);
}

Collectives™ on Stack Overflow

JQuery callback on function

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related