Наложение не отображается, когда для JQUERY ajax async установлено значение false только в IE

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 делает 2 вещи

1) Изменения в элементе DOM путем удаления и добавления класса

2) Делает Ajax Call Это специально сделано асинхронным ложным, чтобы получить значение из сервиса и получить подтверждение от пользователя.

Проблема только в браузере IE, где showparentOverlay (прозрачный div) не отображается, пока не завершится вызов службы ajax.

Однако, если для AJAX установлено значение true, отображается оверлей.

Может ли кто-нибудь помочь мне с этой проблемой, где я мог бы отображать прозрачное наложение, когда установлено соединение с услугой и установлена ​​асинхронизация для службы - false.

Спасибо

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 для загрузки оверлея ...

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

Это вызовет службу и после ее открытия откроетсяваше наложение.