當 JQUERY ajax async 僅在 IE 中設置為 false 時，覆蓋不顯示

Question

輸入按鈕在單擊事件上調用 javascript。

<input id="ToolbarStatusSubmitHtmlInputButton" type="button" value="Submit" runat="server"  visible="True" enableviewstate="true" onclick="callfunction()"/>

The onclick 'callfunction' is as follow

callfunction: function() {
        showparentOverlay();
        $.ajax({
            url: url,
            type: "GET",
            async: false,.....

 showparentOverlay: function() {
        $("#parentOverlay").removeClass('hideOverlay').addClass('showOverlay');
    },

Callfunction 做了兩件事

1) 通過刪除和添加 class 來更改 DOM 元素

2) 進行 Ajax 調用 故意將其設置為 async false，以從服務中檢索值並獲得用戶的確認。

該問題僅出現在 IE 瀏覽器中，其中 showparentOverlay(transparent div) 直到 ajax 服務調用完成后才會顯示。

但是，如果 AJAX async 設置為 true，則覆蓋顯示。

誰能幫我解決這個問題，我可以在連接到服務並設置服務的異步時顯示透明覆蓋 - 錯誤。

謝謝

Answer 1

嘗試這個：

 function oninputclick() { document.getElementById("window").style.width = "100%"; $.ajax({ async: false, type: 'POST', dataType: 'html', success: function (result) { // success do something }, complete: function () { // enable this when posting to server //setTimeout(function () { document.getElementById("window").style.width = "0%"; }, 3000); } }); //for test only. use this inside the complete function. setTimeout(function () { document.getElementById("window").style.width = "0%"; }, 3000); }

 .overlay { height: 100%; width: 0; position: fixed; z-index: 9999999; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); overflow-x: hidden; transition: 0.5s; }.overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; }.overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #f1f1f1; display: block; transition: 0.3s; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="window" class="overlay"> <div class="overlay-content"> <a href="javascript:void(0)" id="msgText">Loading...</a> </div> </div> <input type="button" value="Submit" runat="server" visible="True" onclick="oninputclick();"/>

Answer 2

我建議將async選項設置為true並使用success的 function 加載覆蓋...

$.ajax({
   url: url,
   type: 'GET',
   success: function(data){
      //Show Overlay here
   }
});

這將調用該服務，成功后將打開您的疊加層。