21

Using jQuery UI tabs - and I've written a plugin that integrates with ui tabs. I've got the plugin setup to initiate jQuery UI tabs if it .tabs() hasn't been called, but this just does a simple class check:

 if(!$globalTabs.hasClass("ui-tabs")){
    $globalTabs.tabs();
 }

But this is problematic, because often to avoid FOUC, developers add in the UI classes to the the tabs to get a better initial render before document.ready.

I could check for a different class, such as `ui-widget1, but wondering if there's another/better way?

Jason
  • 7,612
  • 14
  • 77
  • 127
  • But why do you care if it's been called or not? You can always call .tabs() again without anything bad happening. – aquinas Sep 12 '12 at 18:10
  • @aquinas - it's usually good practice to avoid making unnecessary calls. – Jason Sep 12 '12 at 19:02
  • Agreed, but you're worried about making one (possibly unnecessary) call? Look at this fiddle: http://jsfiddle.net/gBZbd/. I'm calling tabs *1000* times, and it only takes 10 milliseconds. Seems like an awfully big premature optimization to me. @Frédéric Hamidi is absolutely correct in his answer, but AFAIK, this isn't documented anywhere. That code *could* break at any time. Just my two cents of course. – aquinas Sep 12 '12 at 19:18
  • 1
    @aquinas, this is actually documented, see my updated answer. – Frédéric Hamidi Sep 12 '12 at 19:57
  • Ah ha. I guess I've seen plugins do that but didn't realize it was "officially" sanctioned. Good reference. +1. (But I still think worrying about one call to tabs() is not worth thinking about. :) – aquinas Sep 12 '12 at 20:11
  • @aquinas - we have a dinosaur of a site - it's huge/enterprise level and I try to minimize calls as much as possible, because our codebase stretches back for years and years, and a ton of developers have had their hand in the pot. So the code is bloated, so I try to refactor and minimize impact as much as possible. Someone's got to be the shepherd of the code... – Jason Sep 13 '12 at 13:13

2 Answers2

43

You can query the attached widget with data():

if (!$globalTabs.data("tabs")) {
    $globalTabs.tabs();
}

This behavior is documented in the Widget factory page of jQuery UI's Development & Planning Wiki:

  • Plugin instance accessible via $( "#something" ).data( "pluginname" )

    • A reference to a jQuery object containing the DOM element is available as a property of the instance as this.element, so it is easy to go back and forth between the object and the element.

Update: From jQuery UI 1.9 onwards, the widget key becomes the widget's fully qualified name, with dots replaced with dashes, as in:

if (!$globalTabs.data("ui-tabs")) {
    $globalTabs.tabs();
}

Using unqualified names is still supported in 1.9 but is deprecated, and support will be dropped in 1.10.

Frédéric Hamidi
  • 258,201
  • 41
  • 486
  • 479
  • 2
    +1 the answer. BUT with regard to my comment about premature optimization: running the if statement actually makes the code slower: See: http://jsfiddle.net/gBZbd/ versus http://jsfiddle.net/gBZbd/2/. – aquinas Sep 12 '12 at 20:18
  • @aquinas, indeed, but the question does not mention performance, so we do not know if it's about speed. The questioner might actually need to know if a widget has been instantiated on an element, for reasons we cannot guess. So, I tried to answer that, just in case :) – Frédéric Hamidi Sep 12 '12 at 20:23
3

somehow it causes some error when i try to check the instance.

i need to reinitialize the tabs and for me a try catch did the trick:

try {
    $('.mytabs').tabs('destroy');
} catch (exception) {}

and after that just initialize again:

$('.mytabs').tabs();
Guntram
  • 961
  • 14
  • 19
  • May be due to newer jQuery UI versions, which changed some of the methods such as "data". – Jason Sep 10 '14 at 13:42
  • unfortunately i am a little bit limited by having to support ie8... so updating plugins has to be done very carefully (or better don't update anything :D ) – Guntram Sep 10 '14 at 14:36