我的jQuery加载叠加层不会每次都显示

Question

For whatever reason, my jquery loading overlay doesn't load at all under any circumstance even though the same code was working just days ago. Well, not the exact same code. I have been trying to get the overlay to resize with the window, and I have been trying different things, but I don't understand what I did that caused the overlay to never even show up? Here is the code that should attach to the overlay to the correct 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();
    });
}

Notice how I create the div. I give it an id, and then I call it's css atribute. From there I set all the css attributes. I then attempt to call fadeIn, and fadeOut after the ajax call. Any body have any idea why this isn't working? Any help would be great.

Some More clarification

Also notice how I chose the div to overlay. I get a div id from my dom

    $div = $("#TabView1");

Also, I looked the source, and I do have that particular div in there. So that is not the problem. Somehow or the other, it simply isn't showing up. UPDATE: The DOM I get Below is what is produced from the jquery code. It appears as though everything is being created fine. Note also, that display is set to none. That is what I would expect since I have the overlay fade out. My question is why does it never show up.

<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

Well, the better way to create the overlay div would be

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

Does that solve the problem? Otherwise, the ID might not be created, or does it?

Update for the edit from your post: the "width" attribute is not set on the created overlay. What happens if that is added and set to eg 100px? It seems like there is something wrong with the setting of the width attribute (or the getting of the width attribute of $div).

Answer 2

Is this code called more than once? If so, are you removing #overlay somewhere?

Calling this code multiple times would create duplicate #overlay dom nodes which is a no-no and could explain why it doesn't work sometimes.

To remove it, change:

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

to:

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

Answer 3

Your selector doesn't look right.

I would try:

$('#overlay').css. . . .

Answer 4

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();
        });
    });
}

Man. That was real hard to debugg. I wish Visual studio 2010 had better jquery debugging capability. Thankfully, the next version is supposed to be a better jquery debugger. But, the problem was the width attribute.