0

I have a js function that adds an extra tab + panel to an existing JQuery UI tab widget upon the click of a button,

let $tabs = $('#my-tab').tabs(options);

$button.click(function(e){
  let $newtab = $('#additional-tab'),
    $newpanle = $('#additional-panel'),
    ref = '#'+$newpanel.attr('id');

  $tabs.children('ul').append($newtab);
  $tabs.append($newpanel);
  
  //I would now like to load the newly created tab.
  $tabs.on('tabscreate', function(e,ui){
    $tabs.tabs("load",ref);
  });
  //refresh to enable the new tab/panel.
  $tabs.tabs("refresh");
})

The new tab/panel get created, but I wish to load it once the widget is "refresh"ed. I have tried to bind to all the events a tabs widget fires,

$tabs.on('tabsbeforeactivate,tabsbeforeload, tabscreate, tabsload, tabsactivate', function(e,ui){
   $tabs.tabs("load",ref);
 });

but none of them are fired by the widget when it is refreshed.

Is there another way to achieve this?

Aurovrata
  • 2,000
  • 27
  • 45
  • I think you need to trigger a `click` event on the new tab to load it. – Twisty Jul 04 '20 at 04:46
  • thanks for the help, the tabs("load",ref) is the documented method to so this, my trouble is executing this after the tabs are refreshed. – Aurovrata Jul 04 '20 at 08:21
  • @Twisty you're right, only way to get it to open the tab is to trigger a click event, even [changing the active option](https://stackoverflow.com/a/15304028/3596672) doesn't work. Executing a delay(200) prior to the event trigger ensure the tabs are properly refreshed. – Aurovrata Jul 04 '20 at 15:16

1 Answers1

0

So after much experiment, I finally reverted to the following solution,

$button.click(function(e){
  let $newtab = $('#additional-tab'),
    $newpanle = $('#additional-panel'),
    ref = '#'+$newpanel.attr('id');

  $tabs.children('ul').append($newtab);
  $tabs.append($newpanel);
  
  //refresh to enable the new tab/panel.
  $tabs.tabs("refresh");

  //activate the new tab,
  $('a', $newtab).delay(200).click();
})

the delay(200) ensures the tabs("refresh") has got time to complete.

Another possible solution is to destroy and recreate the tabs with the active option set to the new tab,

$button.click(function(e){
  let $newtab = $('#additional-tab'),
    $newpanle = $('#additional-panel'),
    ref = '#'+$newpanel.attr('id');

  $tabs.children('ul').append($newtab);
  $tabs.append($newpanel);
  
  //refresh to enable the new tab/panel.
  let idx = $tabs.children('ul').children('li').length-1;

  $tabs.tabs("destroy").tabs({active:idx});
})
Aurovrata
  • 2,000
  • 27
  • 45