Loading data step via AJAX

var sfw;
var next_loading = false;
$(document).ready(function () {
    sfw = $("#wizard_example").stepFormWizard({
        theme: 'sun',
        height: 'auto',
        linkNav: 'prev',
        onNext: function(from, data) {
            if(next_loading) { // test if ajax is executing
                return false;
            }
            if(data !== undefined && data.done) { // if ajax is done, than data.done is set to true
                return true;
            }
            sfw.addSpinner('next'); // add spinner to next button
            next_loading = true; // to prevent stack of ajax requests if user hasn't patience
            $.get('https://www.googleapis.com/books/v1/volumes?q=' + $('#book').val(), function( data ) {
                $('#books').html('');
                $.each(data.items, function(index, value) {
                    $('#books').append(value.volumeInfo.title + '
')
                })
                sfw.addSpinner('next', false);  // remove spinner
                next_loading = false; // allow next step
                sfw.next(false, {done: true}) // go to next step, additional data will be in next callback
            })
            return false;
        }
    });
    sfw.activeNext(false); // disable next button
    $("#wizard_example").on('keyup', '#book', function() {
        if($(this).val() != "") {
            sfw.activeNext(true);
        } else {
            sfw.activeNext(false); // disable next button
            sfw.activeStep(1, false); // deactive next step
        }
    })
})