Wait for Async result before allowing user to go forward in UI Wizard

Question

I am using a Wizard-UI component that has a handleChangingEvent() function that is called when a user hits the forward/back button. This function returns a boolean for whether the transition should occur. During this method call I need to make an async call to determine whether there are errors on the current Wizard step. The results determine whether i should return true/false. How can I have the handleChangingEvent() function wait until the results have arrived?

Answer 1

This is a tricky computer science problem that has many elaborate solutions but no simple ones in javascript. You have 2 options.

1. Make the call to the server synchronous, hence blocking the thread until you receive a response.

2. Override the click handlers on the Prev/Next buttons.

Use something like this solution to store all the current click handlers, then assign your own click handlers that do something like

var can_i_continue = false;

$('#next_btn').on('click', function () {
    $.ajax('/can/i/continue', { params : 'foo' })
    .then(function (event) {
        can_i_continue = true;  
        runSavedClickHandlers(event);
    });
})

wizard.handleChangingEvent = function () {
    return can_i_continue;
};