Jquery BlockUI ne fonctionne pas avec jquery étapes

Question

Dans mon projet, j'utilise les étapes jquery et jquery et BlockUI sous forme de plugins

J'ai maintenant trois étapes sous forme; quand je passe de l'étape 1 à l'étape 2 que je dois faire un appel ajax, vérifiez certains champs, et si tout c'est OK, je peux passer à la deuxième étape

Mon pseudo-code est:

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 : "" 
    } 
}); 

code pseudo od la fonction doAjax(); est la suivante:

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; 
} 

Tout fonctionne très bien, sauf BlockUI; il est jamais montré et il semble être jamais appelé Dans ma console de navigateur, je vois ce qui suit:

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 

Dans ce cas, le BlockUI est jamais appelé. Si j'appelle la même méthode (doAjax) en dehors de la méthode onStepChanging des étapes jquery alors blockUI est appelé avec succès

Quelqu'un peut-il me suggérer comment le faire? Fondamentalement, je veux présenter à l'utilisateur BlockUI lors de l'appel ajax avant un changement radical

merci Angelo

Answer 1

Je résolu mon problème Le problème est lié au fait que je veux faire un appel asynchrone et dire jquery étapes d'attendre jusqu'à la fin de l'appel asynchrone Eh bien ce que je l'ai fait est la suivante:

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 : "" 
    } 
}); 

Comme vous pouvez le voir, je retourne toujours faux si l'assistant ne bouge pas Puis dans mon appel ajax Je fais ce qui suit

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); 
     } 
    }); 
} 

Comme vous pouvez le voir, lorsque les finitions d'appel ajax et tout ce qu'il est OK je peux passer à l'étape suivante en appelant programme cette méthode wizard.steps("next");

En utilisant ce tecnique je résolu mon problème dans mon scénario

J'espère qu'il est utile à quelqu'un d'autre

Angelo