is it possible to update the tab set?

[CBox]

I've needed to update the tab set after i added more tab container and link, so Iv'e got this error: Uncaught Error: Tab '#story-15' does not exist in tab set

and the tab container exist and the link, but i need to find a way to update the tab set on live.

is it possibble?

[JangoSteve]

There's not currently a way to manually add a tab to the set, but you could grab the attached easytabs object and re-run init(), like this:

$('#tab-container').easytabs();

// do some stuff, add a new tab.

$('#tab-container').data('easytabs').init();

[CBox]

Iv'e try this and i'm getting this error: Uncaught Error: Syntax error, unrecognized expression: #/

i'm using this like this: if(jQuery().easytabs) { $('#ajax-tabs').easytabs({ animationSpeed: "fast", transitionIn: "fadeIn", updateHash : false }); }

/// so some things....

$('#ajax-tabs').data('easytabs').init();

any idea?

thanks.

[JangoSteve]

That's not really enough to go on. Where's the error coming from?

[EFRI]

from the jquery-1.7.1.min.js:1

i just wrap this in: $('#submit').live('click', function() { $('#ajax-tabs').data('easytabs').init(); });

and i'm getting this error...

( I've change my profile, CBox it's still me :+1: )

[JangoSteve]

Oh, that sounds like it might actually be an issue I encountered myself and fixed a few weeks ago. Apparently I forgot to push the fix to Github. Try using the latest easytabs from this repo now. Here is the commit I pushed: https://github.com/JangoSteve/jQuery-EasyTabs/commit/17ee0f3c106c919b3c5d68e4466140024b76594e

[EFRI]

it's working great now! but unfortunately it's active 2 tabs when i add more tab. thank you for your support!

[JangoSteve]

I'm just guessing now, since I haven't personally tried doing this, but maybe try something like this:

var $tabContainer = $('#tab-container');
$tabContainer.easytabs();

// do some stuff, add a new tab.

var myeasytabs = $tabContainer.data('easytabs');
myeasytabs.tabs.removeClass(myeasytabs.settings.tabActiveClass);
myeasytabs.panels.removeClass(myeasytabs.settings.panelActiveClass);
myeasytabs.init();

[CBox]

i don't know how to thank you! it's working great! thanks alot for your support and patient.

[JangoSteve]

No prob. It'd probably be a good idea for me to do some refactoring and pull the addTab() function out to a public method you could call without having to re-init easytabs.

[CBox]

i don't know what change but after the second time that i'm adding a tab i;m getting this erorr: Uncaught TypeError: Cannot read property 'tabActiveClass' of undefined $.ajax.success l jquery-1.7.1.min.js:1 c.fireWith jquery-1.7.1.min.js:1 r jquery-1.7.1.min.js:1 r

[CBox]

I've chacked and after the myeasytabs.init(); some how it's delete the object. any idea?

[JangoSteve]

Hey @CBox, sorry for the confusion. Each time you call myeasytabs.init(), it's deleting and re-creating the easytabs data object on the tab container element, which means simply that your myeasytabs variable is getting de-referenced. You can fix this by re-setting your myeasytabs var after you call init():

myeasytabs.init()
myeasytabs = $tabContainer.data('easytabs');

It's not ideal, but I plan to make it easier to add tabs in a future version anyway. Another thing I should probably think about would be to have the init() function return the data object, so you could also do something like myeasytabs = myeasytabs.init() to combine the above two lines.

I'll reopen this issue as a reminder to myself to look into these features.

[Craigy-]

Hello! I have a same problem, but your temporary solution doesn't work for me.

$(container_id).easytabs({
  defaultTab: $(container_id+' ul.dynatable-tabs > li:eq(0) > a').parent(),
  tabs: $(container_id+' ul.dynatable-tabs > li > a').parent(),
  panelClass: 'tabs-hide',
  updateHash: false,
  animate: true,
  animationSpeed: 'fast',
  transitionIn: 'slideDown',
  transitionOut: 'slideUp'
});

Tabs set don't updated after myeasytabs.init(). Maybe it happens because I set 'tabs' variable? Can you help please?

[bobmehta]

Hello,

Any ETA on new features (Add, Delete and re-order etc.)?

We had to do many things manually and this tabs is excellent with history option. Starting new project and POC and really want to know the ETA.

[hopecee]

Public method is no more working after myeasytabs.init(); call.

var $tabContainer = $('#tab-container');
$tabContainer.easytabs();

// do some stuff, add a new tab.

var myeasytabs = $tabContainer.data('easytabs');
myeasytabs.tabs.removeClass(myeasytabs.settings.tabActiveClass);
myeasytabs.panels.removeClass(myeasytabs.settings.panelActiveClass);

myeasytabs.init();
myeasytabs = $tabContainer.data('easytabs');

$tabContainer.easytabs('select', '#tab-3');  // It does not select.

How can it be fixed?

[hopecee]

I have figured out something. $tabContainer.data('easytabs') object is empty after calling myeasytabs.init(). It needs to be reassigned with myeasytabsvalue.

var $tabContainer = $('#tab-container');
$tabContainer.easytabs();

// do some stuff, add a new tab.

var myeasytabs = $tabContainer.data('easytabs');
myeasytabs.tabs.removeClass(myeasytabs.settings.tabActiveClass);
myeasytabs.panels.removeClass(myeasytabs.settings.panelActiveClass);
myeasytabs.getTabs();     // use this method to touch/get all the tabs.

myeasytabs.init();   

myeasytabs.publicMethods.select('#tab-3'); //use this method to select tab.

// $tabContainer.data('easytabs');  is empty here and needs to be reassigned.
$tabContainer.data('easytabs', myeasytabs);

$tabContainer.easytabs('select', '#tab-2'); //this method will start working now.


// do some stuff, add another new tab.


myeasytabs = $tabContainer.data('easytabs');
myeasytabs.tabs.removeClass(myeasytabs.settings.tabActiveClass);
myeasytabs.panels.removeClass(myeasytabs.settings.panelActiveClass);
myeasytabs.getTabs();     // use this method to touch/get all the tabs.

myeasytabs.init(); 

I still need to figure out why it is hiding other scripts from executing.. I need your comments Steve.

[hopecee]

It seems that calling myeasytabs.init() disbound any function that is bound to any html element inside the tabContainer. For it to continue working, you have to rebind it. e.g.

function test() {
$('.tabContainer-innerElement').on('click', function() {
alert('test');
}


test();
...
myeasytabs.init();  
...
//test() stops executing unless you call it again.
test();