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

Problem with DataTable and TabView

Expand Messages
  • pryankster
    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
    Message 1 of 3 , Aug 23, 2008
    • 0 Attachment
      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
    • pryankster
      ... Replying to my own message, it looks like the 2.6.0 preview release fixes the issue with Firefox, but I still get JS errors with IE (6 and 7). --
      Message 2 of 3 , Aug 24, 2008
      • 0 Attachment
        --- 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.

        Replying to my own message, it looks like the 2.6.0 preview release
        fixes the issue with Firefox, but I still get JS errors with IE (6 and 7).

        -- pryankster
      • 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 3 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.