在AJAX請求期間顯示/隱藏不工作

我有一個使用ajax請求數據的函數。我想顯示繁忙的微調，但隱藏/顯示不會更改元素的可見性。在AJAX請求期間顯示/隱藏不工作

function RequestDataFromServer(stuff, url) { 
    var result; 

    $.ajax({ 
     url: url, 
     data: { stuff: Stuff}, 
     async: false, 
     beforeSend: function() { 
      $("#divOverlay").show(); 
      console.log("Starting..."); 
     }, 
     complete: function() { 
      $("#divOverlay").hide(); 
      console.log("Complete!"); 
      result = true; 
     }, 
     success: function (data) { 
      AddDataToCache(data); 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      result = false; 
     } 
    }); 

    return result; 
}

我知道顯示/隱藏語法是正確的，因爲它在我將它附加到按鈕時起作用。我一直在使用也嘗試：

$(document).ajaxStart(function(){ 
    $("#divOverlay").show(); 
})

在沒有影響（但是如果我一步通過這個事件在Chrome它顯示和隱藏的元素）。我也嘗試在調用RequestDataFromServer函數的函數中顯示/隱藏...仍然沒有。我沒有想法。

來源

2017-01-13 I.Am.Me

確保您定位的元素具有ID'divOverlay' .. –

您的控制檯日誌消息是否顯示？您的ajax操作實際上需要一段時間才能運行，或者很快就結束了，因此沒有時間查看疊加層？ –

@Zakaria - 這個ID是正確的，我用一個按鈕測試它，並且元素顯示正確。 –

試試在divOverlay css顯示中使用這個用法：none; 這個工作也是。

$(document).ajaxStart(function(){ 
      $("#divOverlay").css("display", "block"); 
     });

你在你的AJAX

beforeSend: function() { 
      $("#divOverlay").show(); 
      console.log("Starting...");

這意味着「之前顯示我的div送我AJX」你寫的同一指令的2倍。選擇一個並刪除另一個。

來源

2017-01-13 14:51:45 demopix

試過了，仍然沒有去。我也嘗試拿出$（「＃divOverlay」）。hide（）;在Complete上查看Show是否在做任何事情。它的確如此，它顯示了ajax請求完成後...即使控制檯消息正確顯示。呃... –

我測試了這個，並且.show()和.hide()在我的ajax調用中工作就好了。我猜你有一些語法錯誤導致了這一點。我們來做點家務。

首先，正如其他人提到的那樣，使您嘗試顯示的元素可以在DOM中訪問。這是IMO最常見的疏漏。我推測你有一個元素，如：

<div id="divOverlay" style="display:none;">Something</div>

其次，變量是區分大小寫的。確保變量stuff以data: {stuff: stuff}傳遞時爲小寫。

第三，值得注意的是，complete既success或error後調用，因此你應該result = true真的success而非complete定義。

function RequestDataFromServer(stuff, url) { 
    var result; 

    $.ajax({ 
    url: url, 
    data: {stuff: stuff}, 
    async: false, 
    beforeSend: function() { 
     $("#divOverlay").show(); 
     console.log("Starting..."); 
    }, 
    complete: function() { 
     $("#divOverlay").hide(); 
     console.log("Complete!"); 
    }, 
    success: function (data) { 
     AddDataToCache(data); 
     result = true; 
    }, 
    error: function() { 
     result = false; 
    } 
    }); 

    return result; 
}

來源

2017-03-22 11:31:20

我有同樣的問題，它的工作時異步：真。仍然不知道原因，但它的工作。

來源

2017-11-17 10:04:39

不知道在使用已棄用的'async：true'作爲ajax時，ajax的整個想法是它是異步的。絕對不是一個好的/推薦的答案 –

即使在其他博客中，他們也建議添加async：true。但沒有人描述原因。我的主要問題是如果我在beforeSend部分添加3行的代碼。第一行被執行，第三行被執行，但不是第二行。 –

在AJAX請求期間顯示/隱藏不工作

回答

相關問題