Waiting For Ajax Response Same Function

I know that similar questions have been posted many times, however I've read many of them and can't find an answer to my problem. I have a function that waits for an ajax request r

Solution 1:

You could use the jQuery wait method. I took an example from docs page to highlight how you'd do it:

$.when( $.ajax( "/request.php" ) ).done(function( response ) {
        // response argument resolved from ajax requests// process any work after ajax call finishes
}

A link to docs page:

http://api.jquery.com/jquery.when/

Solution 2:

I'm doing this async: false for waiting and it works, but this is a bad design also I can't use a blockUI plugin.

Unless your wizard is better designed and supports async callbacks (e.g., promise-returning ones), async:false is your only choice.

Consider switching to a different wizard, and don't forget to file a bug for the plugin that you're currently using.

Solution 3:

One hackish work-around is to do it before leaveStep. Perhaps on showStep:

var wizard_next_step;
$("#wizard").smartWizard({
    onShowStep : function (obj, context) {
        onLeaveStepFunction(obj, context, function(nextStep){
            wizard_next_step = nextStep;
        });
    },
    onLeaveStep : function () {
        return wizard_next_step;
    }
});

You'd also need to modify your onLeaveStepFunction to accept a callback:

functiononLeaveStepCallback(obj, context, callback) {
    nextStep = sendForm(callback);
}

And your ajax function should then be:

$.ajax({
    url : path,
    type : "POST",
    async : false,
    data : $("#" + idForm).serialize(),
    success : function(data) {
        $("#" + idDiv).html(data);
        callback( !$("#" + idHiddenErrores).val()) );
    }
});

Now, it looks like you're drawing into the wizard window with this:

$("#" + idDiv).html(data);

I'm entirely sure if this is the case. But if it is then you cannot do this here (obviously because it's onShowStep which would overwrite current content). If this is so you should pass the data in the callback:

success : function(data) {
    callback( data , !$("#" + idHiddenErrores).val()) );
}

Write the wizard like this:

var wizard_next_step;
var wizard_data;
$("#wizard").smartWizard({
    onShowStep : function (obj, context) {
        onLeaveStepFunction(obj, context, function(data, nextStep){
            wizard_data = data;
            wizard_next_step = nextStep;
        });
    },
    onLeaveStep : function (obj, context) {
        $("#" + idDiv).html(wizard_data);
        return wizard_next_step;
    }
});

The key is to call all the asynchronous functions and get the data long before you call all your synchronous functions.

Note: I don't know smart-wizard at all and not a serious jQuery user. The answer above is based on my 2 minutes reading smart-wizard documentation on github and my understanding of javascript. You will definitely need to modify my examples to make it work.