Forums

Board index » YUI 2.x: » Using YUI 2.x Components

Page 1 of 1   [ 3 posts ]
New Topic | Post Reply | Print view

R. Cas

  • Username: pen247
  • Joined: Thu Sep 17, 2009 11:02 am
  • Posts: 2
  • Offline
  • Profile
Tags:

Multi-Row TAB / TABVIEW issue on content save between rows.

Post Posted: Thu Sep 17, 2009 11:26 am
+0-
I have a multi-tab row situation where clicking on a top level brings up a second row of tabs. I subscribe to the beforeActiveTabChange event to determin if anything on a tab was changed and allow a user to save or cancel before changing tabs. This works well between peer tabs. However, if you select a tab from the main row, the event occurs on the top level tabview not the sub tabview. If you re-enter the second row of tabs the event fires.

I tried subscribing to Visible or Disabled events on the Tab level but these don't fire either. Here is a brief snip of the code. (Tabs / Tabview are created in JavaScript) I have stripped out newlines and combined ({, etc onto single lines to save space in the post. I don't really code this bad :^)

Any help, suggestions or criticisms are greatly appreciated.

Code:
function queryUponTabSwitch() {
  var currentTab = tabView.get('activeTab');
  var currentIndex = tabView.getTabIndex(currentTab);
  if (currentIndex == 1) {
    var commitButton = document.getElementById("updateCommitButton");
    if (commitButton != null) {
      if (updateCommitButton.get('disabled') == false) {
        var save = confirm("Did you want to save the pending changes" + '\n' +
                           "Press OK to save the changes or Cancel to discard the changes.");
        if (save == true) {
          updateCommit(null);
} } } } }
(function() {
  tabView = new YAHOO.widget.TabView({id: 'myTabView'});
  tabView.subscribe('beforeActiveTabChange',function (e) {
    queryUponTabSwitch();
    var currentTab = tabView.get('activeTab');
    var currentIndex = tabView.getTabIndex(currentTab);
    var nextTab = e.newValue;
    var nextTabIndex = tabView.getTabIndex(nextTab);
    var dataSource = nextTab.get('dataSrc');
    var splitDataSource = dataSource.split("?");
    if (nextTabIndex == 0) {
      var newDS = constructDataSrc(splitDataSource[0]);
      nextTab.set('dataSrc', newDS);
    }
    return true;
  });   
 
  systemStatusTab = new YAHOO.widget.Tab({
    label: 'System Status',
    dataSrc: 'systemstatustab.cgi',
    active: true,
    cacheData: false
  });
  YAHOO.plugin.Dispatcher.delegate(systemStatusTab, tabView);
  configTab = new YAHOO.widget.Tab({
    label: 'Config',
    content: '<div id=\"configtabview\"></div>',
    cacheData: false
  });
  YAHOO.plugin.Dispatcher.delegate(configTab, tabView);
  tabView.appendTo('mainview');
})();
function confQueryUponTabSwitch() {
  var currentTab = configTabView.get('activeTab');
  var currentIndex = configTabView.getTabIndex(currentTab);
  if (currentIndex == 0) {
    var commitButton = document.getElementById("hbcCommitButton");
    if (commitButton != null) {
      if (hbcCommitButton.get('disabled') == false) {
        var save = confirm("Did you want to save the pending changes" + '\n' +
                           "Press OK to save the changes or Cancel to discard the changes.");
        if (save == true) {
          hbcCommit(null);
} } } } };
(function() {
  configTabView = new YAHOO.widget.TabView({id: 'myConfigTabView'});
  configTabView.subscribe('beforeActiveTabChange',function (e) {
  confQueryUponTabSwitch();
  var currentTab = configTabView.get('activeTab');
  var currentIndex = configTabView.getTabIndex(currentTab);
  var nextTab = e.newValue;
  var nextTabIndex = configTabView.getTabIndex(nextTab);
  var dataSource = nextTab.get('dataSrc');
  var splitDataSource = dataSource.split("?");
  if (nextTabIndex == 0) {
    var newDS = constructLinkConfigDataSrc(splitDataSource[0]);
    nextTab.set('dataSrc', newDS);
  }
  linkConfigTab = new YAHOO.widget.Tab({
    label: 'Link Config',
    dataSrc: 'linkconfigtab.cgi?',
    cacheData: false
  });
  YAHOO.plugin.Dispatcher.delegate(linkConfigTab, configTabView);
  configTabView.appendTo('configtabview');
})();
(function() {
    var Dom = YAHOO.util.Dom;
    var Event = YAHOO.util.Event;
    var loggerObj = new LoggerObj("logview");
    Event.onDOMReady(function() {
        var layout = new YAHOO.widget.Layout({
            units: [ {
                  position: 'center',
                  body: 'mainview',
                  scroll: true
                }, {
                  position: 'bottom',
                  height: 124,
                  minHeight: 124,
                  body: 'logview',
                  header: 'Logs',
                  scroll: true
                } ] });
        layout.render();
    });
})();

Caridy Patino

YUI Contributor

  • Username: caridy
  • Joined: Mon Dec 08, 2008 5:40 pm
  • Posts: 493
  • Location: Miami, FL
  • Twitter: caridy
  • GitHub: caridy
  • Gists: caridy
  • IRC: caridy
  • YUI Developer
  • Offline
  • Profile

Re: Multi-Row TAB / TABVIEW issue on content save between rows.

Post Posted: Thu Sep 17, 2009 12:54 pm
+0-
Hello R. Cas,

Can you explain in details your use-case. What exactly do you want to do. Also, try to minimize the amount of code in your example, removing external components like layout and dispatcher, to focus on those nested tabview elements that you need.

Best Regards,
Caridy

R. Cas

  • Username: pen247
  • Joined: Thu Sep 17, 2009 11:02 am
  • Posts: 2
  • Offline
  • Profile
Tags:

Re: Multi-Row TAB / TABVIEW issue on content save between rows.

Post Posted: Thu Sep 17, 2009 1:37 pm
+0-
Main TabView (T!) created via JavaScript, Tabs have Dynamic Content from cgi's, etc.
Some Tabs have user editable content. Upon switching to a different tab, allow the
user to save or discard changes.

This was originally accomplished via the beforeActiveTabeChange Event.

Now, one of the Main Tabs has a TabView (T2) on it (second row of tabs). As
with the main row, tabs are created via JavaScript and have Dynamic Content.
Also, some are editable. Again, would like to offer up a confirm dialog in
to save or discard changes upon navigation away from tab.

I subscribed to the beforeActiveTabChange Event and it works as stated
if the change occurs among peer tabs. (same TabView). But, if a user
is on a T2 Tab and selects a T1 Tab, the beforeActiveTabChange Event is
NOT called on T2 but on T1.

I tried to subvert the T1 Event knowing that the current tab on T1 contains T2,
but the T2 Tab and Index always come back as 0, no matter what Tab you are on.

So, the issues is, When a user has made changes on a Tab under T2 (2nd level)
and selects a T1 (main level) Tab, what events occur or can be subscribed to that
allow for a Save/Discard dialog BEFORE switching tabs?

I've tried to simplify the code, but without actual cgi's and data, you can't see the problem.
The code snippet is only good for an example as to how the 2 rows of tabs
are created and tied together to see if there is either a better way to do it, or
a way to subscribe to an event to allow me to do the Save/Discard.

Hope that helps.


Here is some less code, not a whole lot less though.....

Code:
function queryUponTabSwitch() {
  var currentTab = tabView.get('activeTab');
  var currentIndex = tabView.getTabIndex(currentTab);
  if (currentIndex == 1) {
    var commitButton = document.getElementById("updateCommitButton");
    if (commitButton != null) {
      if (updateCommitButton.get('disabled') == false) {
        var save = confirm("OK to save or Cancel to discard.");
        if (save == true) {
          updateCommit(null);
} } } } }
(function() {
  tabView = new YAHOO.widget.TabView({id: 'myTabView'});
  tabView.subscribe('beforeActiveTabChange',function (e) {
    queryUponTabSwitch();
  });   
  systemStatusTab = new YAHOO.widget.Tab({
    label: 'System Status',
    dataSrc: 'systemstatustab.cgi',
    active: true,
    cacheData: false
  });
  tabView.addTab(systemStatusTab);
  configTab = new YAHOO.widget.Tab({
    label: 'Config',
    content: '<div id=\"configtabview\"></div>',
    cacheData: false
  });
  tabView.addTab(configTab);
  tabView.appendTo('mainview');
})();
function confQueryUponTabSwitch() {
  var currentTab = configTabView.get('activeTab');
  var currentIndex = configTabView.getTabIndex(currentTab);
  if (currentIndex == 0) {
    var commitButton = document.getElementById("hbcCommitButton");
    if (commitButton != null) {
      if (hbcCommitButton.get('disabled') == false) {
        var save = confirm("OK to save or Cancel to discard.");
        if (save == true) {
          hbcCommit(null);
} } } } };
(function() {
  configTabView = new YAHOO.widget.TabView({id: 'myConfigTabView'});
  configTabView.subscribe('beforeActiveTabChange',function (e) {
    confQueryUponTabSwitch();
  });
  linkConfigTab = new YAHOO.widget.Tab({
    label: 'Link Config',
    dataSrc: 'linkconfigtab.cgi?',
    cacheData: false
  });
  configTabView.addTab(linkConfigTab);
  configTabView.appendTo('configtabview');
})();
Page 1 of 1   [ 3 posts ]
New Topic | Post Reply | Print view
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Recent Forums Posts

Recent YUI Blog Posts

Online Users

No Users Online

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info

Powered by phpBB® Forum Software © phpBB Group