Javascript in tabs is not executed?
I have 2 tabs and the second one contains some forms with javascript controls.
They require some init() functions to be run on load, however these are not being run when the tabs are used.
I have confirmed that when I remove the line to render the tabs, everything is perfect, and when I add the line in, the JavaScript in the tabs does not function correctly.
Is this a known thing, or should I provide more details?
Many Thanks
Dave
This is not a known thing, easytabs should not be doing anything that messes with any javascript in any of the panels. My initial guess is that those init functions are being run but that they ignore hidden elements (and they're probably being run after easytabs hides the inactive panels).
The way around this would be to either make sure to run those init functions before running easytabs, or to run them the first time the second tab is activated by attaching once to the easytabs:after event hook, with something like this:
var inited = false;
$('#my-tabs').bind('easytabs:after', function(e, $clicked, $targetPanel, settings) {
if ($targetPanel.is('#second-panel') && !inited) {
inited = true;
myInitFunction();
}
});
Thanks for amazing fast reply!
Not working on hidden elements was my first thought.
I made sure that the easytabs was done after, and logged to console, still no joy.
My function was complaining they were "not in the form" as though they were removed by easy tabs.
I added the init to an onclick event for each tab, however it means they run every time you click on them. Does your method above mean it only runs on first view of each panel?
I will try to get more details if it's not a know bug.
Many thanks
Dave
Hmm, well I can tell you easytabs doesn't "remove" anything from the page, it only hides the inactive panels (setting display: none).
Yes, my example above would only run the init functions the first time the tab is selected (actually, I forgot to set inited=true in my code above, so I just updated it to be correct).