search

JangoSteve / jQuery-EasyTabs

Easy and flexible jQuery tabbed functionality without all the styling.
http://www.alfajango.com/blog/jquery-easytabs-plugin/
549 stars 203 forks source link

Dynamic Tabs Issues (and fixes?) #61

Open nateonthenet opened 12 years ago

nateonthenet commented 12 years ago

I was trying to figure out how to add new tabs dynamically and stumbled over https://github.com/JangoSteve/jQuery-EasyTabs/issues/29 which suggested a way to do it. I tried doing this naively as suggested in Issue 29 after creating the necessary list items/divs:

"Re-run the easytabs getTabs function like this: $('#container').data('easytabs').getTabs();"

... but found that there are a couple of problems in my use case, which involved potentially switching out the active tab and container.

  1. If the active tab is removed as part of the dynamic tab update, you have to manually specify an active tab after calling getTabs().
  2. More problematically, it doesn't seem that the bindToTabClicks() function actually binds to the newly created tabs correctly in any case (whether or not the active tab is removed). It's called once as part of plugin.init() but when getTabs() is called again, the click binding call on line 459 of the v3.1.1 code doesn't seem to propagate the binding to the newly-discovered tabs, so nothing happens when you click them.

I fixed the first issue by simply issuing a $('#container').easytabs('select', '#tab'); call after calling getTabs(). The second one I fixed with two modifications to the easytabs code itself:

a) I moved the bindToTabClicks() call from line 103 (plugin.init()) to the very end of plugin.getTabs() (inserted at line 197). This causes the binding to be re-issued after the tabs are rebuilt. b) I modified bindToTabClicks() line 459 to use jQuery on() instead of bind(), although I'm not entirely certain of the implications of this (especially since I took off the namespacing): from: plugin.tabs.children("a").bind("click.easytabs", function(e)... to plugin.tabs.children("a").on("click", function(e)...

I'm pretty sure that there is a more elegant way to do this, particularly because the on() call should (as I understand it) save me from needing the extra bindToTabClicks() calls [it didn't seem to work for me], but with these modifications, dynamic tabs work fine in dev channel Chrome. I haven't tested in other browsers and I don't know if there are other implications to the code changes that I've overlooked.

Yorkaev commented 11 years ago

Thanks for your answer!!! This is very useful to add dinamically new tabs with eastytabs JQuery!!!