在选项卡面板中加载ajax gif

Question

I'm trying to show a gif during an Ajax call; it works fine if the div is at the body level but won't appear in a tab panel. I've tried putting the div at the tab-pane, container, row and column levels but it won't show. Simple html:

 <div id="loading">
     <img id="loading-image" src="images/page-loader.gif" alt="waiting..." />
 </div>

jquery:

$('#loading').hide(); $('#loading').show(); // as required

css:

#loading {
 width: 100%;
 height: 100%;
 top: 0px;
 left: 0px;
 position: fixed;
 display: block;
 opacity: 0.7;
 background-color: #fff;
 z-index: 99;
 text-align: center;
}

#loading-image {
 position: absolute;
 top: 10px;
 left: 24px;
 z-index: 100;
}

Answer 1

Try this:

$(document).ajaxStart(function() {
    $('<div id="loading"><img id="loading-image" src="images/page-loader.gif" alt="waiting..." /></img></div>')
.prependTo('.tabClass'); });

$(document).ajaxStop(function() {
    $('#loading').remove();
});

replacing 'tabClass' with the class of whatever container you want the gif animation to attach to.

I've found this solution to be cleaner & work well.