Loading ...
Sorry, an error occurred while loading the content.

Re: Problem with DataTable and TabView

Expand Messages
  • bretlevy
    If you wait to load/draw the table until the relevant tab is clicked the problem will go away. It requires some flags and hooking the tab events, but it
    Message 1 of 3 , Aug 24, 2008
    • 0 Attachment
      If you "wait" to load/draw the table until the relevant tab is
      clicked the problem will go away. It requires some flags and hooking
      the tab events, but it also gains you some initial page load
      performance (because you won't load anything if the user never goes
      to a particular tab(s)).

      For example, I have a similar situation, and I define my initial tab
      view structure like this (ignore the sprinkles of php at the moment):

      <div id="tabJobs" class="yui-navset">
      <ul class="yui-nav">
      <li class="selected"><a
      href="#tab1"><em>Active</em></a></li>
      <li><a href="#tab2"><em>Pending (within <?=$msg?>)
      </em></a></li>
      <li><a href="#tab3"><em>Future (beyond <?=$msg?>)
      </em></a></li>
      </ul>
      <div class="yui-content">
      <div><p><img src="<?=$IMGDIR?>t_callout.gif">
      Move mouse over status icon for explanation<br><div
      id="searchresults0"><img src="<?=$IMGDIR?>spinner.gif">
      Loading...</div></p></div>
      <div><p><img src="<?=$IMGDIR?>t_callout.gif">
      Move mouse over status icon for explanation<br><div
      id="searchresults1"><img src="<?=$IMGDIR?>spinner.gif">
      Loading...</div></p></div>
      <div><p><img src="<?=$IMGDIR?>t_callout.gif">
      Move mouse over status icon for explanation<br><div
      id="searchresults2"><img src="<?=$IMGDIR?>spinner.gif">
      Loading...</div></p></div>
      </div>
      </div>

      Thus each tab has a "loading..." message and the hook for the tab
      selection redraws the tab contents (via an xhr connection). I hook
      the tab changes like this:

      tabJobs = new YAHOO.widget.TabView("tabJobs");
      tabJobs.addListener ('activeTabChange', function(e){
      showJobs(tabJobs.getTabIndex(e.newValue));
      });

      The showJobs() function makes the request to the server to get the
      data for the tab. After the page loads, I call it immediately for
      the first tab (of course).

      Hope that helps.

      ~~bret



      --- In ydn-javascript@yahoogroups.com, "pryankster" <mikec@...> wrote:
      >
      > I have a DataTable that I'm trying to stick on the second tab of a
      > TabView. When I put the DataTable on the first tab, everything
      works
      > fine, but when I put the DataTable on the second tab, the table is
      > drawn incorrectly until I click on one of the table headers to sort
      > the table, the table then snaps into place.
      >
      > Here's a pastebin with a concise illustration of the problem
      > (http://pastebin.com/m4af470fd).
      >
      > I do most of my development with Firefox, but trying it out just now
      > on IE, I get JS errors that I haven't delved into yet.
      >
      > This appears to be a problem similar to:
      >
      > [#1763201] IE6: Datatable "Invalid argument" in hidden div
      > http://sourceforge.net/tracker/index.php?
      func=detail&aid=1898464&group_id=165715&atid=836476
      >
      > ...which was supposedly fixed in 2.5.0 (I'm using 2.5.2, Firefox
      3.0.1
      > and IE 6.0)
      >
      > Any help or workaround would be greatly appreciated!
      >
      > -- pryankster
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.