Мой оверлей загрузки JQuery не отображается каждый

Question

По какой-то причине мой оверлей загрузки jquery вообще не загружается ни при каких обстоятельствах, хотя тот же код работал всего несколько дней назад.Ну, не совсем тот же код.Я пытался изменить размер наложения с окном, и я пробовал разные вещи, но я не понимаю, что я сделал, чтобы наложение никогда не появлялось?Вот код, который нужно прикрепить к оверлею к правильному div ...

function MRNSearchInternals()
{
    //debugger;
    var form = $("#MRNSearch");
    $div = $("#TabView1");
    var srlzdform = form.serialize();
    var PopID = <% =PopID %>;
    var options = [];
    var $url = $("#target").attr("action");
    $('<div id="overlay">').css({
        position: 'absolute',
        opacity: 0.2,
        top : $div.offset().top,
        left : $div.offset().left,
        width : $div.offset().width,
        height : $div.outerHeight(),
        background: 'blue url(<%=Url.Content("~/images/ajax-loader.gif")%>) no-repeat center'
    }).hide().appendTo($div);    

    $("#overlay").fadeIn();
    $.post('<%:Url.Action("SearchByMRN", "PatientACO")%>', srlzdform, function (data) 
    {                   
        DisplayDemographicSearch(data);
        $("#overlay").fadeOut();
    });
}

Обратите внимание, как я создаю div.Я даю ему идентификатор, а потом называю это атрибутом css.Оттуда я установил все атрибуты CSS.Затем я пытаюсь вызвать fadeIn и fadeOut после вызова ajax.У любого тела есть идея, почему это не работает?Любая помощь будет отличной.

Еще несколько уточнений

Также обратите внимание, как я выбрал div для наложения.Я получаю идентификатор Div от моего DOM

    $div = $("#TabView1");

Кроме того, я посмотрел источник, и у меня есть этот конкретный Div там.Так что это не проблема.Так или иначе, это просто не обнаруживается. ОБНОВЛЕНИЕ: DOM, который я получаю Ниже приведено то, что производится из кода jquery.Похоже, что все создается хорошо.Обратите внимание, что для этого дисплея установлено значение none.Это то, что я ожидал, так как у меня наложение исчезло.У меня вопрос, почему он никогда не появляется.

<div class="TabView" id="TabView1">
    <div class="Tabs">...</Tabs>
    <div class="Pages">
    <div id="overlay" style="left: 114px; top: 205px; height: 452px; display: none; position: absolute; opacity: 0.2; background-image: url("/images/ajax-loader.gif"); background-attachment: scroll; background-repeat: no-repeat; background-position-x: center; background-position-y: center; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: blue;"/>
</div>

Answer 1

Ну, лучший способ создать оверлейный див - это

$('<div/>', {
    id: 'overlay'
})

Решает ли это проблему? В противном случае идентификатор может не быть создан, или это так?

Обновление для редактирования из вашего поста: атрибут "width" не установлен для созданного наложения. Что произойдет, если это будет добавлено и установлено, например, 100px? Кажется, что-то не так с настройкой атрибута width (или получением атрибута width из $ div).

Answer 2

Этот код вызывается более одного раза? Если это так, вы удаляете #overlay где-нибудь?

Многократный вызов этого кода приведет к созданию дублирующих #overlay узлов dom, что является нет-нет и может объяснить, почему он иногда не работает.

Чтобы удалить его, измените:

$("#overlay").fadeOut();

до:

$("#overlay").fadeOut('slow', function () {
    $("#overlay").remove();
});

Answer 3

function MRNSearchInternals()
{
    //debugger;
    var form = $("#MRNSearch");
    $div = $("#TabView1");
    var srlzdform = form.serialize();
    var PopID = <% =PopID %>;
    var options = [];
    var $url = $("#target").attr("action");
    $('<div id="overlay">').css({
        position: 'absolute',
        opacity: 0.2,
        top : $div.offset().top,
        left : $div.offset().left,
        width : $div.offset().width, //<- The problem is right here should be $div.width
        height : $div.outerHeight(),
        background: 'grey url(<%=Url.Content("~/images/ajax-loader.gif")%>) no-repeat center'
    }).hide().appendTo($div);    

    $("#overlay").fadeIn();
    $.post('<%:Url.Action("SearchByMRN", "PatientACO")%>', srlzdform, function (data) 
    {                   
        DisplayDemographicSearch(data);
        $("#overlay").fadeOut('slow', function () {
             $("#overlay").remove();
        });
    });
}

Человек.Это было очень сложно отладить.Я хотел бы, чтобы Visual Studio 2010 имела лучшую возможность отладки jquery.К счастью, следующая версия должна стать лучшим отладчиком jquery.Но проблема была в атрибуте ширины.

Answer 4

Ваш селектор не выглядит правильно.

Я бы попробовал:

$ ( '# Перекрытие). CSS. , , .