0

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

Fredv
  • 552
  • 1
  • 8
  • 22

2 Answers2

2

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.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • excellent answer Oleg, you are the best :) I have found that the $("#list") is hidden but it still shows in IE7, i don't know why. One trick is to make a $("#load_list").html("Loading in progress...") on tabs select event and they disappear .. not clean but it works – Fredv Jun 10 '11 at 09:51
  • @Fredv: You are welcome! Vous êtes les bienvenus! One of possible reason of IE7 problems could be an old jQuery version which you use. I recommend you to use either 1.5.2 or 1.6.1. I suppose that there are an exception in IE7 during processing of JSON data. You can use and debugger to localize the problem. For example Visual Studio or [Developer Tools](http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535) could help. – Oleg Jun 10 '11 at 10:01
0

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.

samlii
  • 21
  • 1