ajax正在運行時顯示進度條或微調器

-5

當我正在運行ajax時試圖添加進度條或微調器，但進度條和微調控件只會出現在與來自ajax的成功警報同時出現。ajax正在運行時顯示進度條或微調器

注意：我正在使用JSP，並且使用ajax通過servlet更新數據庫數據。進度條正在使用引導程序。

$('#sync').click(function() { 

     var start = $('#startdate').val(); 

     var end = $('#enddate').val(); 

     if ((start !== "") && (end !== "")) { 

      var startDate = new Date(start); 

      var endDate = new Date(end); 

      $('#cover').show(); 
      $.ajax({ 
       type: "post", 
       url: "PRSync", 
       data: "start=" + startDate.yyyymmdd() + 
         "&end=" + endDate.yyyymmdd(), 
       async: false, 
       beforeSend: function() { 

       }, 
       success: function (data) { 
        var arr = data.split('|'); 
        if (arr[0] === "0") { 
         alert("Sync fail"); 
        } else { 
         alert("Sync Succesfull. Total rows of " + arr[1] + " affected."); 
        } 
       }, 
       error: function (jqXHR, textStatus, errorThrown, err4) { // if error occured 
        alert(jqXHR + " _ " + textStatus + " _ " + errorThrown + " _ " + err4); 
       }, 
       complete: function() { 
        $('#cover').fadeOut(1000); 
       } 
      }); 

     } 
    }); 
    $(document).ajaxStart(function() { 
     // show loader on start 
     showbusy(); 
    }).ajaxSuccess(function() { 
     // hide loader on success 
     hidebusy(); 
    }); 


    Date.prototype.yyyymmdd = function() { 
     var yyyy = this.getFullYear().toString(); 
     var mm = (this.getMonth() + 1).toString(); // getMonth() is zero-based 
     var dd = this.getDate().toString(); 
     return yyyy + "-" + (mm[1] ? mm : "0" + mm[0]) + "-" + (dd[1] ? dd : "0" + dd[0]); // padding 
    }; 

    var myApp; 
    myApp = myApp || (function() { 
     var pleaseWaitDiv = $('<div class="modal fade" style=top:40% id="pleaseWaitDialog" data-backdrop="false" data-keyboard="false"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">Synchronizing is processing</h4></div><div class="modal-body"><div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div></div></div></div></div></div>'); 
     return { 
      showPleaseWait: function() { 
       pleaseWaitDiv.modal(); 
      }, 
      hidePleaseWait: function() { 
       pleaseWaitDiv.modal('hide'); 
      }, 
     }; 
    })(); 
    function showbusy() { 
     myApp.showPleaseWait(); 
    } 
    function hidebusy() { 
     myApp.hidePleaseWait(); 
    }

來源

2015-07-10 Geoffrey

爲什麼'異步：FALSE'？ –

這是一個很好的博客，可以幫助你。 http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/ – Dorvalla

你可以假設，如果開始和結束都不是空AJAX將開始？那麼，爲什麼你不把這個陳述附加到你的DOM中，並在成功時再次隱藏它呢？ –

你有沒有嘗試過這樣的：

$(document).bind("ajaxStart", function(){ 
    showbusy(); }) 
.bind("ajaxStop", function(){ 
    hidebusy(); 
});

顯然，如果你的Ajax調用處理速度非常快，它似乎是你的功能被觸發「晚」，但由事件結合$(document)你要確保它們沒有被觸發一次。

如果仍然不適合您的需求，我會放在功能Ajax調用內：

$.ajax({ 
    beforeSend: showbusy(), 
    complete: hidebusy() 
});

來源

2015-07-10 08:27:40

您可以使用jquery.blockUI.js。

你可以在你像這樣的代碼初始化：

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

來源

2015-07-10 08:38:00 Kashyap

ajax正在運行時顯示進度條或微調器

回答

相關問題