Attach an event handler function for table sortable

Question

I currently have the following code

     $(document).on('click', '#educationDone', function () {
    var linkText = $('#educationDone').text();
    if (linkText === 'Done') {
        $('#degreeTable td:nth-child(1), #degreeTable th:nth-child(1)').hide();
        $(this).text('Edit and reorder entries');
        $("#degreeTable tbody").sortable("disable");
    } else {

        $(this).text('Done');
        $('#degreeTable td:nth-child(1), #degreeTable th:nth-child(1)').show();
        $("#degreeTable tbody").sortable("enable");

    }
});

and I get the jquery-ui error:

     cannot call methods on sortable prior to initialization; attempted to call method 'enable'

When it gets to the line:

      $("#degreeTable tbody").sortable("enable");

or

       $("#degreeTable tbody").sortable("disable");

The code runs totally fine when I had it all on the initial load page but now I'm trying to break it into pieces so it loads only when the user clicks on a certain button to load all of the HTML and js for that section. In order for the click events to work I had to go to adding the Event Handler by using the .on. I am assuming that the error is being throw because the page is being dynamically build. How do I need to rewrite the sortable line? I'm pretty sure it's syntax because I've tried to put it in every place I can but it does not work. I'm guessing it is something like:

   $(document).on('sort'),'#degreeTable', function()){}

But I don't have a clue, I'm using jquery-1.12.4.min.js and ui/1.12.1/jquery-ui.js

Thanks for the help

Answer 1

Here is a simple example using Sortable with a Table. If you expand your example to include more details, someone may be able to advise more.

$(function() {
  $("#sortable tbody").sortable({
    disabled: true,
    items: "> tr"
  });
  $("#sortable").disableSelection();

  $(".edit").on("click", function(e) {
    var $target = $(this).parents("table").find("tbody");
    if ($(this).text() == "Edit Order") {
      $(this).html("Save");
      $target.sortable("enable");
    } else {
      $(this).html("Edit Order");
      var tableData = $target.sortable("serialize");
      // Save tableData to a data source or file
      $target.sortable("disable");
    }
  })
});

#sortable {
  margin: 0;
  padding: 0;
  width: 60%;
}

#sortable tr td {
  margin: 0 3px 3px 3px;
  padding: 0.125em;
  padding-left: 1.5em;
  font-size: 1.125em;
  height: 18px;
}

#sortable tr.ui-sortable-helper td {
  border: 1px dashed #ccc;
  display: block;
  width: 80%;
}

#sortable td span {
  position: absolute;
  margin-left: -1.3em;
}

table .btn {
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  padding: 0.125em .2em;
  font-size: 65%;
  font-weight: 100;
  float: right;
  width: 60px;
}

table .btn:hover {
  background-color: #eef;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<table id="sortable">
  <thead>
    <tr>
      <th>Items <span class="edit btn">Edit Order</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</td>
    </tr>
    <tr>
      <td class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</td>
    </tr>
    <tr>
      <td class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</td>
    </tr>
    <tr>
      <td class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</td>
    </tr>
    <tr>
      <td class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</td>
    </tr>
    <tr>
      <td class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</td>
    </tr>
    <tr>
      <td class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</td>
    </tr>
</table>

Since you are not using a List (<ul>), you need to define the items that sortable will use. This would be the Rows (<tr>) of the table in the table body.

See more: http://api.jqueryui.com/sortable/#option-items