return ajax result from callback function

Question

I have two callbacks one of them should return boolean value and other do an ajax call. but can't get result from the second one.

I've read some explanation of how to return the response from an asynchronous call but can't get any result.

there is my code :

    if( $.fn.wizard ) {
        $('#wzd-enrollment').wizard({
            //some code

            onStepLeave: function (wizard, step){
                //in this function i have always to return a boolean value to move to the next step or not
                var result;
                result = doAjax(wizard, step);
                console.log(result); //always log undefined 
                return result;
            }
        });

        function doAjax(wizard, step){
            if(step.id == 'step-1' ){
                //some code
                $.ajax({
                    type: "GET",
                    dataType: 'json',
                    url: s_url,
                }).done(function( data ) {
                    //some code
                    return true;

                }).fail(function(jqXHR, textStatus, errorThrown){
                    //some code
                    return false;
                });
            }else{
                return true;
            }
        }
    }

because you can't tell wether or when it will be called; or even how often. Use the Promise, jQuery provides you. — Thomas, Apr 20 '16 at 09:44
@MehdiAtraimche — You should do what the question you linked to says to do: Do the work in the callback itself. — Quentin, Apr 20 '16 at 10:05
@Quentin : the work that i have to do is to return the result from doAjax to the onStepLeave. but i can't do this on the callback itself cause it always return undefined — Mehdi Atraimche, Apr 20 '16 at 10:07
Use the promise returned by $.ajax and return it from your doAjax back to onStepLeave. In your done callback you resolve the promise, and in onStepLeave you can use `$.when(promise).then(....)` to do something as soon as the ajax call ends — devnull69, Apr 20 '16 at 10:11
@devnull69 can you please write an example, I don't know how I implement it ! — Mehdi Atraimche, Apr 20 '16 at 10:32

score 0 · Answer 1 · answered Apr 20 '16 at 10:13

You should do the doAjax function on document.ready. There is no need to do this on step leave.

Check the code below

var s_url = ''; // fill out your url here
// save the result in a var
var resultStep1 = true;

if( $.fn.wizard ) {
    $('#wzd-enrollment').wizard({
        //some code

        onStepLeave: function (wizard, step){
            var result2 = false;
            return checkResult(step);
        }
    });
}

function doAjax(){
    //some code
    $.ajax({
        type: "GET",
        dataType: 'json',
        url: s_url,
    }).done(function( data ) {
        //some code
        resultStep1 = true;

    }).fail(function(jqXHR, textStatus, errorThrown){
        //some code
        resultStep1 = false;
    });
}

function checkResult(step) {
    if(step.id == 'step-1' ){
        return resultStep1;
    }
    else {
        return true;
    }
}

// get the result on page load
$(document).ready(function() {
    doAjax();
});

I can't do it on document ready, because the event who triggers should be onStepLeave, there is a form data who should be send on the ajax form. — Mehdi Atraimche, Apr 20 '16 at 10:18
Ah i see, can you add buttons to the form? then it would be great to implement your own 'next' button, and hide the wizards 'next' button. If clicked on next, your ajax call will be triggered- when it returns, you trigger the click on the real ' next' button with jquery. — Alain Vanderbroeck, Apr 20 '16 at 10:26

score 0 · Answer 2 · answered Apr 20 '16 at 10:38

This is the code that fits my last answer:

<input type="button" value="Next" id="wizard_next_button" style="display: none" />
<input type="button" value="Next" id="your_next_button" style="display: block" />
<script>
var s_url = ''; // fill out your url here
// save the result in a var
var result = true;

if( $.fn.wizard ) {
    $('#wzd-enrollment').wizard({
        //some code

        onStepLeave: function (wizard, step){
            return result;
        }
    });
}

function doAjax(callback){
    if($("#wizard").steps("getCurrentIndex") == 'step-1' ){
        //some code
        $.ajax({
            type: "GET",
            dataType: 'json',
            url: s_url,
        }).done(function( data ) {
            //some code
            if ( typeof(callback) == 'function' ) {
                callback(true);
            }

        }).fail(function(jqXHR, textStatus, errorThrown){
            //some code
            if ( typeof(callback) == 'function' ) {
                callback(false);
            }
        });
    } else {
        if ( typeof(callback) == 'function' ) {
            callback(true);
        }
    }
}

// get the result on page load
$("#your_next_button").click(function() {
    doAjax(function(retval) {
        result = retval;
        $("#wizard_next_button").trigger('click');
    });
});
</script>

I will try this solution out. but still not the best. thanks @Alain — Mehdi Atraimche, Apr 20 '16 at 10:49
You're welcome. I know it is not the most beautiful answer.. but i think it should work. — Alain Vanderbroeck, Apr 20 '16 at 11:10

return ajax result from callback function

2 Answers2