2016-10-18 2 views
1

Имейте контейнер DIV, который действует как прозрачный фон с загружаемым сообщением.IE10 не показывает прозрачное сообщение DIV/ожидания

HTML код DIV conatainer

<div id="generatingexcel" style="display:none; position: fixed; width: 100%;height: 100%; z-index: 999; top: 0; left: 0; background:rgba(25, 25, 25, 0.5);"> 
    <div style="color: #fff; font-size: 24px; position: absolute; left: 500px; top: 400px;"> 
     <strong>Generating Excel Please wait....</strong> 
    </div> 
</div> 

Исполнительной вызов Ajax и первым делом АЯКС функция успеха, чтобы сделать прозрачный дисплей DIV: блок и после того, как выполнение делается положат обратно дисплей: нет для прозрачного DIV.

$("#generatingexcel").css("display", "block"); 

$.ajax({ 
    type : "GET", 
    url : url, 
    contentType : "application/json; charset=utf-8", 
    success : function (msg) { 
     //code 
    }, 
    async : false, 
    error : function (err) { 
     alert(err); 
    } 
}); 

$("#generatingexcel").css("display", "none"); 

Он отлично работает в FF, но по какой-то причине в IE10 прозрачный DIV и сообщение загрузки не отображаются.

Итак, чтобы отладить, я добавил предупреждение() после строки блока отображения, а прозрачный DIV с сообщением показан в IE10. как только я удалю предупреждение снова, он не появится.

$("#generatingexcel").css("display", "block"); 
alert("Wait"); 

Почему он не получает триггер, или я ничего не вижу здесь.

ответ

0

Вы не можете добавить два условия в одно и то же время. Если вы это сделаете, будут запущены только последние условия. Вы можете также использоваться show()/hide() метод для отображения ни вашего элемент

Solution 1

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

$.ajax({ 
    type : "GET", 
    url : url, 
    async : false, 
    contentType : "application/json; charset=utf-8", 
    success : function (msg) { 
     $("#generatingexcel").hide(); 
    }, 
    error : function (err) { 
     alert(err); 
    } 
}); 

Решения 2

Вы можете добавить это к <head> тегу

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" > 

Solution найдено здесь: Solution to IE10 Ajax Problem

UPDATE

Хорошо я не знаю, почему покрышка не показывают с IE, но я нашел решение.

Вставьте в setTimeout() с длительностью 1. Я попробую с большими и маленькими данными Json.

Пожалуйста, попробуйте:

$(document).ready(function(){ 
    $("#generatingexcel").css("display", "block"); 
    setTimeout(function(){ 
     $.ajax({ 
      type : "GET", 
      url : url, 
      cache: false, 
      async : false, 
      contentType : "application/json; charset=utf-8", 
      dataType: "json", 
      success : function (msg) { 
       $("#generatingexcel").css("display", "none"); 
      }, 
      error : function (err) { 
       alert(err); 
      } 
     }); 
    },1) 
}) 
+0

Какие условия вы имеете в виду? Его Ajax имеет 'async: false', поэтому css изменяется последовательно и ajax блокируется. – DanFromGermany

+0

Я хочу сказать, что второй '$ (" # generateexcel "). Css' после того, как ajax() вызывается до того, как будет выполнен ajax-вызов. –

+0

В IE 10 и <, async: false не работает нормально –

Смежные вопросы