Duplicating last tab by clicking + button with jQuery UI Tabs

Question

I need to create a tabbed page where the user can click a tab / button to duplicate the last tab as shown in the image below:

In this case, you'd click the plus sign and TAB 3 would be created with the same contents as TAB 2.

I'm wondering what would be the best way to go about this?

Edit:

Here's a JSFiddle (be sure to hit run first) with the code I've so far. It's almost there, but if your tab name has a space it doesn't dupe the last child html for some reason.

Answer 1

It is better to manually generate id rather than directly using the user input to generate id, since it should be unique, it can not contain spaces etc.

We can set the tab's title to user input while generating unique id behind the scene.

I've updated your code by making use of jquery clone() method as shown below:

$(function() {
  var $tabs = $("#tabs").tabs(),
    $dialog = $("#new_tab_dialog").dialog({
      autoOpen: false,
      height: 200,
      width: 350,
      modal: true,
      buttons: {
        "Create a new tab": function() {
          $dialog.dialog("close");
          var tid = parseInt($(".tab").last().attr("id").replace("tab", "")) + 1,
            li = $("<li/>").insertBefore("#list li:last");
          $("<a/>", {
            text: $("#new_tab_input").val(),
            href: "#tab" + tid
          }).appendTo(li);
          $("#tabs div.tab:last").clone().attr("id", "tab" + tid).appendTo("#tabs");
          $tabs.tabs("refresh").tabs("option", "active", -2);
          alert(tid);
        },
        Cancel: function() {
          $dialog.dialog("close");
        }
      },
      open: function() {
        $("#new_tab_input").val("");
      }
    });

  $("#create_tab").click(function() {
    $dialog.dialog("open");
  });
});

input.text {
  margin-bottom: 12px;
  width: 95%;
  padding: .4em;
}

<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="tabs">
  <ul id="list">
    <li><a href="#tab1">Tab 1</a>

    </li>
    <li><a href="#tab2">Tab 2</a>

    </li>
    <li><a href="#new_tab_dialog" id="create_tab">+</a>
    </li>
  </ul>
  <div id="tab1" class="tab">
    <p>Tab 1 content.</p>
  </div>
  <div id="tab2" class="tab">
    <p>Tab 2 content.</p>
    <p>When you click the plus it should create a new tab (and corresponding div) by duplicating the last child in the list.</p>
  </div>
</div>
<div id="new_tab_dialog" title="Duplicate the last tab">
  <input type="text" id="new_tab_input" class="text ui-widget-content ui-corner-all" placeholder="Enter new tab name" />
</div>

Side note: I've given a common class name for the content <div>'s to easily get the id like $(".tab").last().attr("id"), rather than getting it from the tabs which will look something like $("#tabs").find("li:last").prev().find("a").attr("href")

P.S: Looks like jquery ui keeps on attempting to fetch the content even if # is specified for the tab's anchor. I've given it the id of dialog instead to satisfy the poor thing.