在同步ajax上显示等待对话框

Question

我想在创建同步ajax时显示等待对话框。 我使用智能向导，以改变步骤之间的一步到我必须验证一些数据做，我必须使3 ajax调用一个接一个，而这一切都完成后，我想显示一个等待对话框。这就是我正在做的。

if (indexes.fromStep==1) { 
    res=false; 
    var validatorResult = validator.checkAll($("#install_modbus_form")) 
    if (validatorResult) {   
     $("#modal_loader").modal()  
     $.ajax({ 
      type: "post", 
      url: url1, 
      async: false,    
      dataType: "json", 
      data:{ 
       data 
      },  
      success: function(response) 
      { 
       if (response.success) 
       { 
        $.ajax({ 
         type: "post", 
         url: url2, 
         async: false,    
         dataType: "json", 
         data:{ 
          data 
         },  
         success: function(response) 
         { 
          if (response.success) 
          { 
           $.ajax({ 
            type: "post", 
            url: url3, 
            async: false,    
            dataType: "json", 
            data:{ 
             data 
            },  
            success: function(response) 
            { 
             if (response.success) 
             { 
              //make magic here 
              res=true; 
             } 
            }, 
            failure:function() 
            { 
             waitingDialog.hide() 
             res=false 
            }, 
            error:function(a,b,c) { 
             waitingDialog.hide() 
             res=false 
            } 
           ) 
          } 
         }, 
         failure:function() 
         { 
          waitingDialog.hide() 
          res=false 
         }, 
         error:function(a,b,c) { 
          waitingDialog.hide() 
          res=false 
         } 
        ) 
       } 
      }, 
      failure:function() 
      { 
       waitingDialog.hide() 
       res=false 
      }, 
      error:function(a,b,c) { 
       waitingDialog.hide() 
       res=false 
      } 
     ) 
     $("#modal_loader").modal('hide')   
     return res;//if true change step 
    } 
} 

我有特里使用beforeSend显示等待对话框，我也有特里使用的setTimeout但等待对话框不显示和智能向导不往前走

希望能对你有所帮助，林新在jQuery中。

对不起，我的英文不好

Answer 1

在您使用jQuery-Smart-Wizard的假设，解决的办法是：

• 您onLeaveStep事件处理程序的建设，和（或含）
• 一问题中显示的验证代码的修改版本。

幸运的是，即使插件本身不支持异步性，它也很容易做到。从本质上讲，你需要做的是：

• 从onLeaveStep回调返回false，
• 建立一个承诺，其履行的成功验证，或拒绝失败，
• 调用自许的.smartWizard('goForward')成功处理程序
• 从promise的错误处理程序调用.smartWizard('showError')。

基于的SmartWizard的ReadMe.md，这里的用于执行同步和异步验证的框架：

$(document).ready(function() { 
    var waitingDialog = $('#whatever'); // ??? 

    // Smart Wizard   
    $('#wizard').smartWizard({ 
     onLeaveStep: leaveAStepCallback, 
     onFinish: onFinishCallback 
    }); 

    function leaveAStepCallback(obj, context) { 
     alert("Leaving step " + context.fromStep + " to go to step " + context.toStep); 
     var returnValue; 
     switch(context.fromStep) { 
      case 1: // asynchronous 
       if (validator.checkAll($("#install_modbus_form"))) { 
        $("#modal_loader").modal(); 
        waitingDialog.show(); 
        validateStep1() // validateStep1() returns a promise 
        .then(function() { 
         // You will arrive here only if all three ajax calls were successful and all three responded with a truthy `response.success`. 
         $('#wizard').smartWizard('goForward'); // advance to next step 
        }, function(e) { 
         // You will arrive here on validation failure 
         $('#wizard').smartWizard('showError', e.message); // something went wrong 
        }).always(function() { 
         // You will arrive here on validation success or failure 
         waitingDialog.hide(); // the waiting is over 
         $("#modal_loader").modal('hide'); // ??? 
        }); 
       } else { 
        $('#wizard').smartWizard('showError', 'validator.checkAll() failed'); 
       } 
       returnValue = false; // *must* return false to remain at step 1. If validation is successful, `.smartWizard('goForward')` will be executed later (see above). 
      break; 
      case 2: // synchronous 
       returnValue = validateStep2(); // validateStep2() returns true of false 
      break; 
      case 3: 
       ... 
      break; 
     } 
     return returnValue; // true or false 
    } 

    // And here's the all-important `validateStep1()` : 
    function validateStep1() { 
     var sequence = [ 
      { url: 'url/1', data: {...} }, 
      { url: 'url/2', data: {...} }, 
      { url: 'url/3', data: {...} } 
     ]; 

     return sequence.reduce(function(promise, item, i) { 
      return promise.then(function() { 
       return $.ajax({ 
        'type': 'post', 
        'url': item.url, 
        'dataType': 'json', 
        'data': item.data 
       }).then(function(response, textStatus, jqXHR) { 
        return response.success ? response : $.Deferred().reject(jqXHR, 'response.success not truthy at validation stage ' + i); // note: need to mimic jQuery.ajax's error signature. 
       }); 
      }); 
     }, $.when()) // starter promise for the reduction 
     .then(null, function(jqXHR, textStatus, errorThrown) { 
      return $.Deferred().reject(new Error(textStatus || errorThrown)); 
     }); 
    } 

    function validateStep2() { 
     // if validation here is synchronous, then return true of false 
     if(....) { 
      return true; 
     } else { 
      return false; 
     } 
    } 
    function validateStep3() { 
     ... 
    } 
    // etc. 

    function onFinishCallback(objs, context) { 
     if(validateAllSteps()) { 
      $('form').submit(); 
     } 
    } 

    function validateAllSteps() { 
     var isStepValid = true; 
     // all step validation logic  
     return isStepValid; 
    }   
}); 

注：

• 分支逻辑是在onLeaveStep回调。
• validateStep1()使用链式承诺模式对三个ajax调用进行排序。
• 如果validateAllSteps()需要重复step1验证，那么您将需要再次调用validateStep1().then(...)，或者从先前缓存的承诺中链接。

正如你所看到的，上面的一些方面是不完整的，所以还有一些工作要做。