add() callback called after show()

[rs]

I have an empty tabs structure which I create programatically:

jQuery('<div/>').append('<ul/>').tabs({
  add: function(event, ui) {
    console.log('tab created', ui.panel);
  },
  show: function(event, ui) {
    console.log('tab opened', ui.panel);
  }
}).tabs('add', '#test', 'Test');

Strangely though, the show callback gets called before the add callback:

EXPECTED OUTPUT: [tab created] [div#test] [tab selected] [div#test]

ACTUAL OUTPUT: [tab selected] undefined [tab created] [div#test]

OUTPUT THAT WOULD BE FINE AS WELL: [tab selected] undefined [tab created] [div#test] [tab selected] [div#test]

I want to load content lazily so I fill the panel on the first show. The behaviour, as it is implemented, makes this quite clumsy since I have to check for presence of the panel and then call the show callback manually for the first tab to initialize its contents.

[rs]

When appending the div temporarily to a document, the situation is somewhat better in that ui.panel is no longer undefined but still the show callback is called before the add callback.

[Scott González]

I agree that this is wrong, but since the add method is being deprecated in 1.9, I'd rather not change this since there may be code that relies on the current order (expecting everything to be done prior to the add event being triggered).

[Scott González]

Milestone TBD deleted