Question

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 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

Answer 1

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.