jquery load callback fails

Question

I have this code.

function loadBottom(dockitemid)
{
    var itemno = dockitemid.substring(3,4);
    var adres = pages[itemno - 1];

    $("#BottomLoader").fadeIn(300);

    $("#Bottom").load(adres,function(){$("#BottomLoader").fadeOut(800);});
}

The problem is it only works for the first time. Once the #Bottom div is loaded with some HTML, the load function still works but does not show the progress div (named #BottomLoader) anymore. Why is this happening?

thx in advance

Answer 1

The BottomLoader div, is nested inside the Bottom div, with jQuery.load you are replacing the innerHTML of Bottom div, so after the first execution, that div will no longer exist.

I recommend you take out the BottomLoader element:

<div id="Bottom">
<!-- This will be replaced by $.load -->                    
</div>
<div id="BottomLoader"></div>