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