jquery blockui不能用jquery步驟

在我的項目中，我使用jquery和jquery步驟和blockui作爲插件jquery blockui不能用jquery步驟

現在我有三個步驟的形式;當我從第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 : "" 
    } 
});

僞代碼OD功能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永遠不會被調用。如果我從方法onStepChanging的jquery步驟外調用相同的方法（doAjax），那麼blockUI被成功調用

任何人都可以向我建議如何去做？基本上我想要一個階躍變化

前的這段時間裏，呈現給用戶blockUI謝謝安傑洛

來源

2016-11-29 Angelo Immediata

我解決我的問題的問題與我要打一個異步調用的事實告訴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 : "" 
    } 
});

正如你可以看到我始終返回false因此嚮導不會在我的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我解決了我的情況

我的問題

我希望這是有用的給別人

安傑洛

來源

2016-11-30 10:23:56

jquery blockui不能用jquery步驟

回答

相關問題