jqgrid and jquery tabs : loading text doesn't hide

i am using jquery UI Tabs (1.8.9) and i have some tabs in my web page.

On each tab, i have a jqGrid 3.8.2 which is loading json data at the loading of the page.

For the first tab, everything is ok, i see the Loading yellow box from jqGrid and it disappears. But the problem is, when i move to another tab, i see the 开发者_Go百科jqGrid loaded but i have the small loadui from JQGrid still appearing on all jqgrid of hidden tabs. Refreshing hides it ..

Is it a bug ? something i can fix ? or is there a way to hide it when i change tab ? (i have tried hiding $(".loading") when i change tab but it doesn't work ..

Hmmm one detail : it does that only in IE7 not in Firefox nor Chrome

Thanks

jqGrid use up to two divs to show the loading processing. if loadui has default value 'enable' one div with the id having prefix load_ are used. If you use loadui rqual to 'block' an additional overlay div with the id having prefix lui_ are used.

For example if you use <table> with id="list" the ids of divs which will be used during data loading are 'load_list' and additionally 'lui_list' (if loadui:'block'). Additionally during the grid loading another grid parameter $("#list")[0].grid.hDiv.loading will be set to true during the grid loading.

So you can implement inside of select event handler of jQuery UI tabs hiding and showing the loading divs. Additionally you can test $("#grid_id")[0].grid.hDiv.loading to verify that the grid is really in loading status.

You can read more about the loading dives used by jqGrid here.

The reason it does this is because in IE if the element is in a hidden element it won't hide it properly. I'm not sure what all versions this affects but definitely 6 and 7.

Anyway the fix I have found is to make the jQuery UI tabs hide by moving offscreen, not by setting visibility to none.

This is done by changing the CSS for the ui-tabs-hide class. Add the following to the CSS on the page that includes your tabs

.ui-tabs .ui-tabs-hide  
{
    display: block !important; 
    position:absolute;
    left: -99999px;
    top: 0;
}

The first .ui-tabs can be changed to a more specific selector.

Anyway after the change the loading boxes should disappear as intended.