0

In my project i'm using jquery and jquery steps and blockui as plugins

Now I have a three steps form; when i pass from step 1 to step 2 i need to make an ajax call, check some fields, and if all it's OK i can go to the second step

My pseudo-code is:

form.steps({
    headerTag: "h3",
    bodyTag: "div",
    cssClass : "wizard",
    titleTemplate: '<span class="number">#index#</span> #title#',
    transitionEffect: "slideLeft",
    onStepChanging: function (event, currentIndex, newIndex)
    {
        if (currentIndex > newIndex) 
        {
            return true;
        }
        if(currentIndex === 0  && newIndex ===1 )
        {
            var result = doAjax();
            console.log("result "+result);
            return result; 
        }
    },
    autoFocus : true,
    enableAllSteps : false,
    enableKeyNavigation : false,
    enablePagination : true,
    enableContentCache : false,
    enableCancelButton : true,
    enableFinishButton : true,
    labels : {
        cancel : 'Delete',   
        finish : 'Save',
        next : 'next',
        previous : 'previous',
        current : ""
    }
});

Pseudo code od the function doAjax(); is the following one:

function doAjax()
{
    var dataObj = new Object();
    dataObj.num = $("#num").val().toUpperCase();
    dataObj.cat = $("#cat").val().toUpperCase();
    dataObj.canc = false;
    var start = 0;
    var end = 0;
    $.ajax({
        url: '${ajaxUrl}',
        async  : false, //I need a synchronous call otherwhise jquery steps will process the result before the end of the call
        dataType   : 'json',
        contentType: 'application/json; charset=UTF-8',
        data   : JSON.stringify(dataObj),
        type   : 'POST',
        beforeSend : function(){
            start = (new Date()).getTime();
            console.log("Start: "+start);
            $.blockUI({ 
                message: '<h2><img src="${pageContext.request.contextPath}/images/busy.gif" />Processing....</h2>', 
                onBlock: function() { 
                    alert('Page is now blocked; fadeIn complete'); 
                } 
            }); 
        },
        complete   : function(){
            end = (new Date()).getTime();
            var total = end-start;
            console.log("Stoppo dopo ("+total+") millisecondi");
            $.unblockUI();
        },
        success: function (data) {
            var codiceEsito = data.esitoOperazione;
            if( codiceEsito == 200 )
            {
                esitoSalvataggioPatente = true;
            }
            else if( codiceEsito == 412 )
            {
                esitoSalvataggioPatente = false;
            }
            else if( codiceEsito == 500 )
            {
                esitoSalvataggioPatente = false;
            }
        },
        error: function(data){
            esitoSalvataggioPatente = false;
        }
    });
    console.log("Final result "+esitoSalvataggioPatente);
    return esitoSalvataggioPatente;
}

All works pretty good except blockui; it is never showed and it seems to be never called In my browser console I see the following:

Start 1480419159812
jquery-1.10.2.min.js:6 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.send 
Stoppo dopo (1969) millisecondi
Final result false
result false

In this case the blockUI is never called. If i call the same method (doAjax) outside from method onStepChanging of jquery steps then blockUI is successfully called

Can anybody suggest to me how to do it? Basically I want to present to the user blockUI during the ajax call before a step change

thank you Angelo

Angelo Immediata
  • 6,635
  • 4
  • 33
  • 65

1 Answers1

0

I solved my issue The problem is related to the fact that I want to make an asynchronous call and tell jquery-steps to wait till the end of the asynchronous call Well what i did is the following:

var wizard = form.steps({
    headerTag: "h3",
    bodyTag: "div",
    cssClass : "wizard",
    titleTemplate: '<span class="number">#index#</span> #title#',
    transitionEffect: "slideLeft",
    onStepChanging: function (event, currentIndex, newIndex)
    {
        if (currentIndex > newIndex) 
        {
            return true;
        }
        if(currentIndex === 0  && newIndex ===1 )
        {
            doAjax();
            //Always return false so the wizard doesn't change step
            return false; 
        }
    },
    autoFocus : true,
    enableAllSteps : false,
    enableKeyNavigation : false,
    enablePagination : true,
    enableContentCache : false,
    enableCancelButton : true,
    enableFinishButton : true,
    labels : {
        cancel : 'Delete',   
        finish : 'Save',
        next : 'next',
        previous : 'previous',
        current : ""
    }
});

As you can see I always return false so the wizard doesn't move Then in my ajax call I do the following

function doAjax()
{
    var dataObj = new Object();
    dataObj.num = $("#num").val().toUpperCase();
    dataObj.cat = $("#cat").val().toUpperCase();
    dataObj.canc = false;
    $.ajax({
        url: '${ajaxUrl}',
        async  : false, //I need a synchronous call otherwhise jquery steps will process the result before the end of the call
        dataType   : 'json',
        contentType: 'application/json; charset=UTF-8',
        data   : JSON.stringify(dataObj),
        type   : 'POST',
        beforeSend : function(){

            $.blockUI({ 
                message: '<h2><img src="${pageContext.request.contextPath}/images/busy.gif" />Processing....</h2>'
            }); 
        },
        complete   : function(){
            $.unblockUI();
        },
        success: function (data) {
            var codiceEsito = data.esitoOperazione;
            if( codiceEsito == 200 )
            {
               //All controls have been successfully verified; I can move the the next step
               wizard.steps("next");
            }
            else if( codiceEsito == 412 )
            {
                 console.log("Validation failed..."+e);
            }
            else if( codiceEsito == 500 )
            {
                 console.log("Error..."+e);
            }
        },
        error: function(data){
           console.log("Error..."+e);
        }
    });
}

As you can see, when the ajax call finishes and all it's OK i can move to the next step by calling programmatically this method wizard.steps("next");

By using this tecnique I solved my problem in my scenario

I hope it is usefull to somebody else

Angelo

Angelo Immediata
  • 6,635
  • 4
  • 33
  • 65