Dynamic Icons on Tabs

[stollar]

I want to programatically add an icon to a tab - the tab contains data which needs saving and once the data is dirty I want to place a SAVE icon on the tab.

[stworthy]

Please call 'update' method to update a tab panel. The code below shows how to update the icon on a selected tab panel.

Code:

var t = $('#tt');
var p = t.tabs('getSelected');
t.tabs('update', {
  tab: p,
  type: 'header',
  options: {
    iconCls: 'icon-ok'
  }
})

[stollar]

Can I add an event handler to the icon at the same time? Something like:   (this didn't work out)

Code:

var t = $('#tt');
var p = t.tabs('getSelected');
t.tabs('update', {
    tab: p,
    type: 'all',
    options: {
        iconCls: 'icon-save',
        handler:function() {
            console.log('SAVE');
        }
    }
});

[stworthy]

No, you can not do that. Please set the 'tools' instead.

Code:

var t = $('#tt');
var p = t.tabs('getSelected');
t.tabs('update', {
  tab: p,
  type: 'header',
  options: {
    iconCls: 'icon-ok',
    tools:[{
      iconCls:'icon-mini-refresh',
      handler: function(){
        alert('refresh')
      }
    }]
  }
})

[stollar]

This worked really well and when data in the tab changes I can add the SAVE icon which fires the function when clicked. But, here's my problem:  I need to know the TAB number which holds the pressed icon.  Bearing in mind that it quite possibly won't be the SELECTED tab.  How can I get the Tab number inside the function?  I also need to keep in mind that some tabs may have been closed which may mess with any saved values.

Any suggestions?

Code:

var t = $('#tt');
var p = t.tabs('getSelected');
t.tabs('update', {
  tab: p,
  type: 'header',
  options: {
    iconCls: 'icon-ok',
    tools:[{
      iconCls:'icon-mini-refresh',
      handler: function(){
        alert('SAVE TAB #'+tabNo);
      }
    }]
  }
})