Jquery blockui не работает с JQuery шаги

Question

В моем проекте я использую JQuery и JQuery шаги и blockui в качестве плагинов

Теперь у меня есть форма три шага; когда я перейти с шага 1 к шагу 2, мне нужно сделать вызов AJAX, проверить некоторые поля, и если все это нормально, я могу перейти ко второму шагу

Мой псевдокод:

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

Псевдокод О.Д. функция doAjax(); заключается в следующем:

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

Все работает очень хорошо, за исключением blockui; он никогда не показывал, и это, кажется, не будет никогда называется В моем браузере консоли я вижу следующее:

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 

В этом случае blockUI никогда не называется. Если я вызову тот же метод (doAjax) вне метода onStepChanging шагов jquery, то blockUI успешно вызван

Может ли кто-нибудь предложить мне, как это сделать? В основном я хочу представить пользователю blockUI во время AJAX вызова до изменения

шаг спасибо Angelo

Answer 1

я решил мою проблему Проблема связана с тем, что я хочу сделать асинхронный вызов и сказать Jquery-шаги, чтобы ждать до конца асинхронного вызова Ну, что я сделал следующий:

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

Как вы можете видеть, что я всегда возвращает ложь, так что мастер не двигается Тогда в моем AJAX вызова Я делаю следующее

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

Как вы можете видеть, когда заканчивается вызов Ajax и все это нормально, я могу перейти к следующему шагу, вызвав программно этот метод wizard.steps("next");

С помощью этого tecnique я решил мою проблему в моем сценарии

Я надеюсь, что это полезно для кого-то еще

Angelo