IE Пользовательский интерфейс блока браузера при совершении ajax вызова кода на стороне сервера при отображении счетчика - PullRequest
Новая
       11

IE Пользовательский интерфейс блока браузера при совершении ajax вызова кода на стороне сервера при отображении счетчика

2 голосов
/ 08 января 2020

Я использую jquery, mvc в моем приложении. У меня возникла ситуация, когда я хочу показать вращающуюся / загрузочную картинку, когда ajax происходит вызов кода на стороне сервера. поэтому для этого я сделал асин c вызов, как показано ниже, для кода на стороне сервера, но в inte rnet explorer его блокирующий пользовательский интерфейс и загружаемое изображение не показывают вращение.

ниже мой ajax код вызова 

 function GetDetails(){
 $('.spinner').show();
  var requestObject = {
            url: url,
            type: "POST",
            data: JSON.stringify(data),
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            async: true,
            success: function (data) {
              $('.spinner').hide();
               result = data;
             }
      };
   }

Но прежде чем я получу ответ от ajax образ загрузчика зависает и не показывает его как загрузку. Похоже, что на самом деле браузер IE блокирует пользовательский интерфейс. Так может кто-нибудь поможет мне решить проблему, заранее спасибо.

1 Ответ

1 голос
/ 08 января 2020

Попробуйте очистить кэш браузера IE и приготовить ie или перезапустить браузер IE и компьютер.

Поскольку проблема не может быть воспроизведена с помощью вашего кода, я создал Например, используя следующий код, он хорошо работает на моей стороне (используя Chrome, Microsoft Edge и IE 11 браузер), вы можете сослаться на него. 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btnGet").click(function () {
            $.ajaxSetup({
                global: false,
                type: "GET",
                url: "https://api.ipify.org/?format=json",
                beforeSend: function () {
                    $(".modal").show();
                },
                complete: function () {
                    $(".modal").hide();
                }
            });
            $.ajax({
                data: "{}",
                success: function (r) {
                    $("#lblIPAddress").html("IP Address: " + r.ip);
                }
            });
        });
    });
</script> 
<style type="text/css">
    body {
        font-family: Arial;
        font-size: 10pt;
    }

    .modal {
        position: fixed;
        z-index: 999;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background-color: Black;
        filter: alpha(opacity=60);
        opacity: 0.6;
        -moz-opacity: 0.8;
    }

    .center {
        z-index: 1000;
        margin: 300px auto;
        padding: 10px;
        width: 130px;
        background-color: White;
        border-radius: 10px;
        filter: alpha(opacity=100);
        opacity: 1;
        -moz-opacity: 1;
    }

        .center img {
            height: 128px;
            width: 128px;
        }
</style>

<input type="button" id="btnGet" value="Get IP Address" />
<br />
<br />
<span id="lblIPAddress"></span>
<div class="modal" style="display: none">
    <div class="center"> 
        <img src="https://i.stack.imgur.com/nOAYl.gif" />
    </div>
</div>

Результат выглядит так:

enter image description here

Ссылка: Показать индикатор загрузки (занято) с наложением с jQuery AJAX пример

...