Спиннер jQuery Ajax не отображается в IE7 - PullRequest
Новая
       3

Спиннер jQuery Ajax не отображается в IE7

0 голосов
/ 21 января 2011

Я пытаюсь отобразить счетчик ajax при загрузке содержимого AJAX.

Следующий код работает нормально в Firefox, но не в IE7.Вызываются функции, чтобы показать и скрыть счетчик, но браузер просто не отображает его.

Вот jQuery: 

        $.ajax({ 
            url: filterorSearch,
            data: {filterParams: JSON.stringify(filters), requestTime: new Date().getTime()},
            beforeSend: function(){
                showLoadingGraphic();
            },
            complete: function(){
                hideLoadingGraphic();
            },
            success: function(data){
                $("#BreakingNews").html(data);
                GetRelatedarticles();                
            }
        });

    function showLoadingGraphic() {
        alert("show");
        var showSpinner = $('#page-placeholder-wrapper #main-left').prepend('<div id="ajaxLoader"></div>');
        return showSpinner;
    }

    function hideLoadingGraphic() {
        alert("hide");
        var hideSpinner = $('#ajaxLoader').remove();
        return hideSpinner;
    }

и связанный CSS для счетчика: 

#page-placeholder-wrapper #main-left 
{
    position:relative;
    }

#ajaxLoader 
{
    background:rgba(255,255,255,.7) url("../images/icon-ajax-loading.gif") no-repeat center center;
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:9999;
    }

Ответы [ 4 ]

1 голос
/ 22 января 2011

Чтобы заставить вас работать, попробуйте это: 

    background: url("../images/icon-ajax-loading.gif") no-repeat center center rgba(255,255,255,.7);

Я не знаю, почему RGBA должен быть последним!

[EDIT]

IE не поддерживает rgba, поэтому, начиная с background:, он ошибается, а остальная часть строки не выполняется для css

См .: Поддержка браузера для RGBa

1 голос
/ 21 января 2011

JQuery фактически запускает события, когда выполняет ajax. 

$(document).ajaxStart(function(){
    $('#ajaxIndicator').show();
 }).ajaxStop(function(){
    $('#ajaxIndicator').hide();
 });

Это сэкономит вам много времени, делая это вручную для каждого отдельного звонка.

У вас может быть DIV относительно верхней части документа, который вы можете показать / скрыть, который перекрывает все остальное на странице. (Я забыл точный CSS, который делает его всегда 200px от верхней части экрана и т. Д.) Update: я думаю, что его позиция: исправлена, хотя я не уверен, насколько хорошо это будет работать в IE. 

  <body>
    <div id="ajaxIndicator" style="position:fixed; top:200px; text-align:center">
        <img src="../indicator.gif" /> Loading ...
    </div>

    ...
1 голос
/ 21 января 2011

Могут возникнуть проблемы с Z-сортировкой элементов DOM;

IE обрабатывает Z-сортировку объектов немного иначе, чем в других браузерах.Попробуйте установить z-index для вашего элемента-обертки, и это должно помочь.Как правило, рекомендуется избегать неприятностей с элементами, расположенными с относительным или абсолютным позиционированием, чтобы всегда давать своим родителям надлежащий z-индекс;

Наличие реальной страницы для отладки облегчит задачу.

0 голосов
/ 21 января 2011

Ради моего здравомыслия и выполнения этого сегодня.

Я добавил элемент «ajaxLoader» в разметку, изначально скрытый с помощью CSS, а затем отображать / скрывать при запуске / остановке AJAX.

Это прекрасно работает для всех браузеров.

Спасибо всем за вклад.

...