• 1 reply
  • Latest Post - ‏2012-05-22T16:41:27Z by AnthonyBpm
1 Post

Pinned topic Tab Focus in Dojo tabs

‏2012-05-22T14:15:00Z |
Hi, I was able to generate the dojo tabs with the help of the toolkit.
Uploaded in ''
But I have an issue with the tab focus - I have four sections of which three sections have a repeating table (Table with ADD and DELETE buttons) and one section has a file uploader. Every time I click 'add a row' in the table in the third tab, the page refreshes and the focus, by default, shifts to the first tab. This happens only with the table and not with file uploader as the page is not refreshed when I click the 'browse' button in file uploader.
The script used is:

createDojoTabs: function(args) {
if(!args) args = {
tcStyle: "width: 800px; height: 100%",
doLayout: false
dojo.addOnLoad(function() {
var tabWrapper = dojo.query(".dojo-tab-wrap > div > table.section")[0];
var tabSections = dojo.query(".dojo-tab > div > table.section");

if( !tabWrapper || !tabSections) {
console.debug("Invalid tab elements. Not creating tabs layout.");
return false;

var newTabWrapper = dojo.create("div",
{id: "dojoTabWrapperDiv"}

dojo.forEach(tabSections,function(entry, i) {
entry = dojo.byId(entry);,"width","99%");
dojo.removeClass(entry, "twStyledSection");
dojo.query( "> tbody > .sectionHeader", entry).style("display","none");
dojo.query( "> tbody > tr.sectionFooter", entry).removeClass("sectionFooterStyled");
var zTitle = dojo.query("#" + + "_SectionTitle > div",entry)[0].innerHTML;
var divWrapId = + "Div";

var divWrap = dojo.create("div",
{ id: divWrapId, title: zTitle }
);, newTabWrapper, "last");, divWrap, "last");
var zTab = new dijit.layout.ContentPane({
title: dojo.attr(divWrap, "title")
});, tabWrapper, "replace");
var tc = new dijit.layout.TabContainer({
style: args.tcStyle,
doLayout: args.doLayout
}, newTabWrapper);


I have also attached the .js file which contains the script.

Could you Please help me in altering the script '$poc.createDojoTabs(); ' to retain the tab focus on the current tab?
Updated on 2012-05-22T16:41:27Z at 2012-05-22T16:41:27Z by AnthonyBpm
  • AnthonyBpm
    390 Posts

    Re: Tab Focus in Dojo tabs

    Remember, that sample is just a sample...

    First, you need to understand dojo tabs:

    Here's an excerpt:
    "Normally, TabContainer will show the first Tab. But it’s also possible to automatically open another Tab with giving one of the ContentPanes the argument selected: true (if programmatically created) or the attribute selected=”true” (if declaratively created)."

    Second, on a page refresh from server, your client state is completely erased. You'll have to store the state of the "selected" tab in a hidden input field on your client. That hidden input should capture the ID of the tab that you want to be visible.

    Third, when the page refreshes, pass that variable from the server to the client and check to see if there is a value for that variable, if there is you specify that tab as being selected as described in the Dojo Toolkit link above.

    Here's a wiki link that will help you with the custom variable binding to store the selected tab state: