jquery ajax加載div不工作在IE瀏覽器和Chrome

這已被問了很多次。但是，在IE和Chrome中，沒有一種解決方案適用於我。jquery ajax加載div不工作在IE瀏覽器和Chrome

我基本上想在ajax調用時顯示加載圖像。

以下是我正在嘗試。

function ws(){ 
    showL(); 
    var res=$.ajax({url:'webservice.asp?service=LoadingTestSRV',async:false,cache:false}).responseText; 
    $('#dv').html(res); 
    hideL(); 
    $('#complete').html('Done'); 
} 
function showL() 
{ 
    $('#loading').show(); 
} 
function hideL() 
{ 
    $('#loading').hide(); 
}

以下是HTML

<table cellspacing="1" cellpadding="1" border="1"> 
    <tr><td> 
     <input type="button" value="ckick" id="btn" onClick="ws();"> 
     <input type="button" value="clear" onClick="$('#dv,#complete').html('');"> 
    </td><td> 
     <div id="dv"></div> 
    </td></tr><tr> 
    <td>Here<div id="loading" style="display:none" >Loading.................</div></td> 
    <td>final<div id="complete"></div></td></tr> 
</table>

以上JS之後，我試圖

ajaxStart和ajaxStop
$ .ajaxSetup
$阿賈克斯（{... }）。done（hideL）

我嘗試過的所有js代碼都在Firefox中工作，但沒有一個在IE和Chrome中工作。 在Firefox中，代碼按預期工作。顯示加載div，調用ajax，加載div被隱藏。這正是我期待的。在IE瀏覽器中，加載div不顯示。也許它會在ajax調用之後或之前非常快地顯示和隱藏。

請讓我知道可以做什麼，使代碼工作在IE瀏覽器&鉻。

必須有一些解決方法，因爲我已經看到其他網站顯示加載div。或者，也許我在做一些愚蠢的事情。

一旦該代碼在所有瀏覽器中工作。我想製作一個通用函數（如jQuery插件）來顯示調用ajax時的加載div。

來源

2012-12-07 Yogesh Sawant

你能告訴我們究竟是不是工作？它顯示，但沒有隱藏或它根本沒有顯示？可以'異步：錯誤'是這裏的問題嗎？ – Dharman

我已更新上面的帖子。加載div在IE和Chrome中不顯示。 –

試試這個：這將確保UR DIV隱藏在AJAX調用完成

function ws() { 
     showL(); 
     var res =""; 
     $.ajax({ 
      url: 'webservice.asp?service=LoadingTestSRV', 
      async: true, 
      cache: false, 
      success: function(data) { 
       res=data; 
       $('#dv').html(res); 
       hideL(); 
       $('#complete').html('Done'); 

      } 
     }); 

    } 

    function showL() { 
     $('#loading').show(); 
    } 

    function hideL() { 
     $('#loading').hide(); 
    }

來源

2012-12-07 14:50:23

此代碼在Chrome中的行爲方式相同。它沒有顯示加載div。 –

@Yogesh張以芳嘗試進行異步：真 –

異步：真做了同樣:( –

後，我做這樣嘗試，如果有幫助..

$.ajax({ 
     beforeSend: function() { 
      $('#loadingDiv').show(); 
      $('#accordion').hide() 
     }, 
     complete: function() { 
      $('#loadingDiv').hide(); 
      $('#accordion').show(); 
     }, 
     type: "GET", 
     url: 
     data: shallowEncodedData, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (

來源

2012-12-07 15:04:27 Scorpio

這種形式已經工作我以前（我放的慢，所以你可以看到它，如果它是快）

$('#loading').ajaxStart(function() { 
    $(this).show("slow"); 
}).ajaxComplete(function() { 
    $(this).hide("slow"); 
});

測試考試這這裏PLE：

http://jsfiddle.net/MarkSchultheiss/xgFkw/

來源

2012-12-07 15:07:55

。在你的Ajax調用的一個問題。從ajax調用中刪除async:false，即使在IE8/9和Chrome中也可以工作。對於其他失落的靈魂，請執行上述更改並重試。

來源

2013-06-19 12:46:29

我有3行代碼$（「＃ID」）文本（「Proccesing ......」）; （「＃id」）。show（）; 警報（$（「＃ID」）文本（））; .. 它提醒我等待處理，但爲什麼不把它顯示在div？它在async：true時正常工作，但當async：false時不顯示div。 ?? –

我在Chrome中針對此問題的解決方法是在一毫秒的AJAX調用上使用超時。

例如

$("#mySpinningLoader").show(); 

var t = setTimeout(function() { 
    $.ajax({ 
     url: rootPath + controllerNAction, 
     async: false, 
     type: "POST", 
     data: JSON.stringify(lightweightObject), 
     dataType: "json", 
     contentType: "application/json; charset=utf-8", 
     success: function (data, textStatus, jqXHR) { 
      $("#mySpinningLoader").hide(); 
     } 
    }); 
}, 1);

來源

2013-07-10 10:08:48 LightNg

此外，必須用setTimeout包裝我的加載圖像才能使其工作。 VAR T1 = setTimeout的（函數（）{ 的document.getElementById（「divLoading」）的style.display = 「」;。 \t \t \t \t}，1）; – user1594257

簡單只是在ajax函數中添加async = true。它會在Chrome瀏覽器

來源

2016-03-03 09:14:52 Grunge

它對我來說非常完美 – user3408779

jquery ajax加載div不工作在IE瀏覽器和Chrome

回答

相關問題