getting id of tab being clicked on

Submitted by LeoF on Fri, 03/09/2012 - 01:01

I need to execute a function when the selected tab changes. I have tried to add an onchange function to tab_control, but the event does not fire.

If using onclick it does fire, but when it does fire the value of tab_control is set to the id of the tab currently open not the tab I am clicking on.

How can I get the id of the tab being clicked on through the onclick event or how can I use the onchange event? I have tried using dojo.connect(dojo.byId('tab_control'), 'onchange', myfunction) but the event does not fire.

[hr][/hr]
I have worked around the issue for now by using dojo connect to add an onclick event handler to the tab_control_container, but can you please address this problem anyway?

RE: getting id of tab being clicked on

Hi LeoF,

The onclick event happens as the user clicks on a particular tab button, which is before the tab change actually occurs, which is why the value in the tab_control field is for the current one, not what was clicked on.
To determine which particular tab was clicked on, you have a couple of options:

Find the ID of the tab anchor clicked on as this will indicate the tab it is for, eg:


var anchor = objEventSource.component;
while (anchor != null && anchor.tagName.toLowerCase() != 'a')
    anchor = anchor.parentNode;
    
var tab = anchor.id.substr((objEventSource.value + '_tab_').length);

Run your code in a timeout to allow time for the tab change to actually go through, eg:


window.setTimeout(function(){
    var tab = dojo.byId(objEventSource.value).value;
}, 5);

Alternatively you can use the approach you have taken by adding the onclick event to the container instead, in which case the tab change will have happened before the event has bubbled up to hit your function.

Please note that we have already resolved the issue with the onchange event not firing, so for the v4 release you will be able to use the onchange event for this as you would expect, without needing these workarounds.

Regards,
Gerard