Adding same jqueryui to multiple tabs

Question

I want to be able to use the same jqueryui to every single tab. Right now, the code only works in one of the tabs... but not on the rest. Any ideas on how I could accomplish this?

This is the jquery I want to apply to the html:

$(document).ready(function(e) {

  // create button and add functionality
  $('#add-todo').button({
    icons: {
    }
  }).click(function() {
    $('#new-todo').dialog('open');
  }); // end click

  // build dialog box and add functionality
  $('#new-todo').dialog({
    modal: true,
    autoOpen: false,
    buttons : {
      "Add task" : function() {
        var taskName = $('#task').val();
        if (taskName === '') {
          return false;
        } 
        var taskHTML = '<li><span class="done"> &#x2705;</span>';
        taskHTML += '<span class="delete"> &#x2704;</span>';
        taskHTML += '<span class="task"></span></li>';

        // convert HTML string to jQuery Object 
        var $newTask = $(taskHTML);

        // add taskname, but make sure HTML is escaped
        $newTask.find('.task').text(taskName);

        //hide new task
        $newTask.hide();

        // append to To Do list 
        $('#todo-list').prepend($newTask);

        // show with effect and highlight
        $newTask.show('clip',250).effect('highlight',1000);
        $(this).dialog('close');
      },
      "Cancel" : function() {
        $(this).dialog('close');
      }
    },
    close: function() {
      $('#new-todo input').val(''); /*clear fields*/
    }
  }); // end dialog

  // mark as complete
  $('#todo-list').on('click','.done', function() {
    var $taskItem = $(this).parent('li');
    $taskItem.slideUp(250, function() {
      var $this = $(this);
      $this.detach();
      $('#completed-list').prepend($this);
      $this.slideDown();
    });
  }); // end on

  //make both lists sortable
  $('.sortlist').sortable({
    connectWith : '.sortlist',
    cursor : 'pointer',
    placeholder : 'ui-state-highlight',
    cancel : '.delete,.done'
  }); // end sortable

  // delete a list item
  $('.sortlist').on('click','.delete',function() {
    $(this).parent('li').effect('puff', function() {
      $(this).remove();
    }); // end effect
  }); // end on

}); // end ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Monday</a></li>
    <li><a href="#tabs-2">Tuesday</a></li>
    <li><a href="#tabs-3">Wednesday</a></li>
  </ul>
  <div id="tabs-1">     
    <div class="container">
      <div id="to-do">
        <h1>Goals</h1>
        <button id="add-todo">Click here to add a goal</button>

        <!-- Datepicker -->
        <h2 class="header">When do you want to do this?</h2>
        <div id="datepicker"></div>
        <form id="formscelta" action="Cal.html" method="post">
          <input type="hidden" name="datascelta" id="datascelta">
        </form>
      </div>
      <h2>These are the things I said I'd like to accomplish today:</h2>
      <ul id="todo-list" class="sortlist">
        <li><span class="done">&#x2705;</span>
          <span class="delete">&#x2704;</span>
          <span class="task"></span></li>
      </ul>
    </div>

    <div id="completed">
      <h2>These are the things I've already completed:</h2>
      <ul id="completed-list" class="sortlist">

      </ul>
    </div>
    <div id="new-todo" title="Add to-do item">
      <p>
        <label for="task">Goal:</label>
        <input type="text" name="task" id="task">
      </p>
    </div>
  </div>
  <div id="tabs-2"></div>
  <div id="tabs-3"></div>
</div>

What exactly are you looking for? If you want tabs you can use $("#tabs").tabs(). Or if there are multiple tab groups in a single page, change the ID to a class and use $(".tabs").tabs(). — Nielsvh
– Nielsvh, Commented May 23, 2016 at 23:18
@Nielsvh I want to be able to use the same jquery functionality (todo list) on every single tab. — essentialgreen
– essentialgreen, Commented May 23, 2016 at 23:34
What functionality is missing? When you make a div a tabbed area all the list items become tabs and the corresponding divs become their content. Have a look at my answer. Both divs with the 'tabs' class become tabs. Are you talking about a non-core widget or the standard tabs (jqueryui.com/tabs)? — Nielsvh
– Nielsvh, Commented May 24, 2016 at 1:23
Wait... do you want the content of #tabs-1 to be replicated in the other tabs without copying the HTML? — Nielsvh
– Nielsvh, Commented May 24, 2016 at 1:25

T J · Accepted Answer · 2016-05-24 04:31:39Z

The simplest, most common and reliable way to reuse a template as of now is to use a <script> tag with type="text/template".

Or if browser support is not an issue you can use template tag or template literals.

It's also possible to have the template as an .html file and load it via AJAX (jQuery load(), RequireJS text plugin , AngularJS $templateRequest etc supports this) which is a bit more complex.

$(document).ready(function(e) {
  $('.tab-content').append($('#tabsTemplate').html());
  $('#tabs').tabs();
}); // end ready

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/template" id="tabsTemplate">
  <div class="container">
    <div id="to-do">
      <h1>Goals</h1>
      <button id="add-todo">Click here to add a goal</button>
      <!-- Datepicker -->
      <h2 class="header">When do you want to do this?</h2>
      <div id="datepicker"></div>
      <form id="formscelta" action="Cal.html" method="post">
        <input type="hidden" name="datascelta" id="datascelta">
      </form>
    </div>
    <h2>These are the things I said I'd like to accomplish today:</h2>
    <ul id="todo-list" class="sortlist">
      <li><span class="done">&#x2705;</span>
        <span class="delete">&#x2704;</span>
        <span class="task"></span>
      </li>
    </ul>
  </div>
  <div id="completed">
    <h2>These are the things I've already completed:</h2>
    <ul id="completed-list" class="sortlist">
    </ul>
  </div>
  <div id="new-todo" title="Add to-do item">
    <p>
      <label for="task">Goal:</label>
      <input type="text" name="task" id="task">
    </p>
  </div>
</script>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Monday</a>
    </li>
    <li><a href="#tabs-2">Tuesday</a>
    </li>
    <li><a href="#tabs-3">Wednesday</a>
    </li>
  </ul>
  <div id="tabs-1" class="tab-content"></div>
  <div id="tabs-2" class="tab-content"></div>
  <div id="tabs-3" class="tab-content"></div>
</div>

like Nielsvh mentioned in his answer, you should make sure there are no id's or unique ids are generated when reusing a template

I honestly didn't know that type="text/template" existed. The more you know.

Nielsvh · Accepted Answer · 2016-05-24 02:16:51Z

If you want to replicate the content into the other tabs, your going to have to think about how your data is structured and what needs to be replicated. I personally would create the object in javascript and then append it to the tabs. You will need to be especially careful of any IDs and make sure they are unique (something I haven't done in the following snippet). Something like:

$(function(){
var mydiv = $("<div class=\"container\">"+
      "<div id=\"to-do\">"+
        "<h1>Goals</h1>"+
        "<button id=\"add-todo\">Click here to add a goal</button>"+
        "<h2 class=\"header\">When do you want to do this?</h2>"+
        "<div id=\"datepicker\"></div>"+
        "<form id=\"formscelta\" action=\"Cal.html\" method=\"post\">"+
          "<input type=\"hidden\" name=\"datascelta\" id=\"datascelta\">"+
        "</form>"+
      "</div>"+
      "<h2>These are the things I said I'd like to accomplish today:</h2>"+
      "<ul id=\"todo-list\" class=\"sortlist\">"+
        "<li><span class=\"done\">&#x2705;</span>"+
          "<span class=\"delete\">&#x2704;</span>"+
          "<span class=\"task\"></span></li>"+
      "</ul>"+
    "</div>"+
    "<div id=\"completed\">"+
      "<h2>These are the things I've already completed:</h2>"+
      "<ul id=\"completed-list\" class=\"sortlist\">"+
      "</ul>"+
    "</div>"+
    "<div id=\"new-todo\" title=\"Add to-do item\">"+
      "<p>"+
        "<label for=\"task\">Goal:</label>"+
        "<input type=\"text\" name=\"task\" id=\"task\">"+
      "</p>"+
    "</div>");
  
  for(var i = 1;i <= 3;i++) {
    $("#tabs ul").append($("<li/>").append($("<a/>").attr("href","#tabs-"+i).html("tab"+i)));
    $("#tabs").append(mydiv.clone().attr("id","tabs-" + i));
  }
  $("#tabs").tabs();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="tabs">
  <ul></ul>
</div>

Collectives™ on Stack Overflow

Adding same jqueryui to multiple tabs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related