Create new jQuery ui tab and populate with Ajax data

Question

I've got a set of jQuery ui tabs that starts with one tab which is pre-poluated with data from another page. That works fine. What I am trying to do is create a series of links that when clicked will dynamically add a new tab, and load the new tab panel with the data in the link path. Here's the code:

$(function(){
var $tabs = $('#tabs').tabs({
    add: function(event, ui) {
        $tabs.tabs('select', '#' + ui.panel.id);
    }
});
$('.add-tab').click(function(e){
    e.preventDefault()
    var tabName=$(this).text(),
        tabNumber=-1;
    $tabs.find('ul li a').each(function(i) {
        if ($(this).text() == tabName) {
            tabNumber = i;
        }
    });
    if (tabNumber>=0)
        $tabs.tabs("select",tabNumber)
    else
        $tabs.tabs("add",this.href , tabName )
    return false
})
})

<a href="../views/subscribers.htm" class="add-tab">Subscribers</a>

<div id="tabs">
<ul>
<li><a href="../views/dashboard.htm">Dashboard</a></li>  
</ul>
<div id="tabs-1">
</div>
</div>

So when you click the "Subscribers" link, it should add a new tab with the title "Subscribers", and load the data from "subscribers.htm" into the tab panel. Everything looks correct, so I'm not sure what's wrong here. Any help is appreciated.

Answer 1

The jQuery UI Tabs Add method is deprecated: http://jqueryui.com/upgrade-guide/1.9/#deprecated-add-and-remove-methods-and-events-use-refresh-method.

Click the button below to see working code.

$(function() {
  var $tabs = $('#tabs').tabs();

  $('.add-tab').click(function(e) {
    e.preventDefault()
    var tabName = $(this).text(),
      tabNumber = -1,
      tabLink = $(this).attr('href');
    $tabs.find('ul li a').each(function(i) {
      if ($(this).text() == tabName) {
        tabNumber = i;
      }
    });
    if (tabNumber >= 0)
      $tabs.tabs("select", tabNumber)
    else {
      $("<li><a href='" + tabLink + "'>" + tabName + "</a></li>")
        .appendTo("#tabs ul");
      $("#tabs").tabs("refresh");
    }

    return false
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/vader/jquery-ui.css">
<a href="../views/subscribers.htm" class="add-tab">Subscribers</a>

<div id="tabs">
  <ul>
    <li><a href="../views/dashboard.htm">Dashboard</a>
    </li>
  </ul>
  <div id="tabs-1">
  </div>
</div>

Answer 2

Thanks to manishie for solving the first piece of the puzzle. I figured out the second, so here is the complete answer. You need to capture the href and store it as a var like so. Then it works perfectly. I'm surprised they don't have an example of this on the jQuery UI site:

$(function() {
var $tabs = $('#tabs').tabs();
$('.add-tab').click(function(e) {
e.preventDefault()
var tabName = $(this).text(),
tabLink = $(this).attr('href'),
  tabNumber = -1;
$tabs.find('.tab-menu li a').each(function(i) {
  if ($(this).text() == tabName) {
    tabNumber = i;
  }
});
if (tabNumber >= 0)
  $tabs.tabs("select", tabNumber)
else {
  $("<li><a href=" + tabLink + ">" + tabName + "</a></li>")
    .appendTo(".tab-menu");
  $("#tabs").tabs("refresh");
}
return false
})
})