Остановите сортировку и переместите tr, используя Javascript

Question

Я хочу остановить сортировку и переместить tr, используя Javascript после нажатия кнопки отмены в модальном режиме. Но когда я запускаю следующий код, я получаю сообщение об ошибке:

Uncaught Error: невозможно вызвать методы для сортировки до инициализации; попытка вызвать метод 'cancel'

Модальный:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria- 
 labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
        </button>
      </div>
  <div class="modal-body">
    Do you really want to update the order?
  </div>
  <div class="modal-footer">
    <button id="cancel_update_order" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button id="update_order" type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

Скрипт:

new Tablesort(document.getElementById('table'));

var fixHelperModified = function(e, tr) {
  var $originals = tr.children();
  var $helper = tr.clone();
  $helper.children().each(function(index) {
      $(this).width($originals.eq(index).width())
  });
  return $helper;
  }


  updateIndex = function(e, ui) {
    $('#exampleModal').modal({
      backdrop: 'static',
      keyboard: false
    })

    $('#update_order').on('click', function() {
      $('td.index', ui.item.parent()).each(function (i) {
          $(this).html(i + 1);
      });
      $('#exampleModal').modal('hide');
    });

    $('#cancel_update_order').on('click', function() {
      $(this).sortable('cancel');
    });

  };

$("#table tbody").sortable({
  helper: fixHelperModified,
  stop: updateIndex
}).disableSelection();

Answer 1

При получении этой ошибки:

Uncaught Error: невозможно вызвать методы для сортировки до инициализации; попытка вызвать метод 'cancel'

это, скорее всего, означает, что вы вызываете "cancel" для элемента , отличного от того, для которого была инициализирована сортировка.

В этом случае у вас есть этот код:

$('#cancel_update_order').on('click', function() { 
    $(this).sortable('cancel'); 
}); 

внутри этого кода "this" относится к cancel_update_order, кнопке, а не к таблице.

Если у вас есть только один сортируемый ( который использует внешний метод updateIndex, тогда это быстро исправляется путем обращения к таблице с инициализируемой сортировкой:

$('#cancel_update_order').on('click', function() { 
    $("#table tbody").sortable('cancel'); 
}); 

Если вы хотите, чтобы это было более многократно, то вам нужно сохранить копию «это», когда оно ссылается на таблицу:

updateIndex = function(e, ui) {

    var sortableElement = this;

    $('#cancel_update_order').on('click', function() {
      $(sortableElement).sortable('cancel');
    });

  };