Tab onSelect is fired onLoad

[pacific202]

I have nested tabs, and it looks like the first tab in each tab group is loading when

Tab A1
  - Tab B1
  - Tab B2
Tab A2
  - Tab C1
  - Tab C2
  - Tab C3
Tab A3
  - Tab D1
  - Tab D2

When a page with these tabs loads, the onSelect event will fire for D1, but A1 and B1 are actually the visible tabs

[pacific202]

I was able to work around this by adding the onSelect event assignment into the onSelect event of the parent tab.

[tslatt]

Could you provide the code of your workaround, please?

[pacific202]

I'll gladly post it after one quick refactor in the next few days.

[pacific202]

Sorry, I had forgotten about this.

Code:

     $("#tab-container").tabs({

        "onSelect": function(title){

            if(lastTab != null){
                eval(lastTab + "_OnUnload()")
            }

            eval(util_Simplify(title) + "_OnSelect()");
            lastTab = util_Simplify(title);

        }            
     });

util_Simplify goes through a string and puts everything to lower case and removes all spaces.  The next version of my code will have objects that manage the content for each tab, and that can be handled easily with the code above by changing the _OnUnload() to .OnUnload().

[pacific202]

I just saw that was an older version of my code.  Instead of $("#tab-container") I just used the class selector on all jeasyui-tab elements.  It works great.

[tslatt]

Thanks for posting this. I'm having trouble understanding it, though. Could you please explain the two lines that start with "eval"? I'm not sure what those are doing. Thank you so much!

Code:

     $("#tab-container").tabs({

        "onSelect": function(title){

            if(lastTab != null){
                eval(lastTab + "_OnUnload()")
            }

            eval(util_Simplify(title) + "_OnSelect()");
            lastTab = util_Simplify(title);

        }            
     });

[pacific202]

eval will dynamically execute JavaScript code, please note that using it is frequently debated because it can be used to maliciously execute code, but in this case I'm getting it to dynamically call a function which is pretty straightforward.

Let's say I have two tabs, abc and def.  I would then create four functions:

function abc_OnSelect() {}
function abc_OnUnload() {}
function def_OnSelect() {}
function def_OnUnload() {}

The code below will execute the appropriate function when a tab is loaded or unloaded.  I could also add some code in there to have the _OnUnload function return a false if there is some condition that should prevent the new tab to load.

Make sense?