Error: no such method 'refresh' for sortable widget instance

[samuelhorwitz]

I occasionally get this error. The culprit appears to be the following:

// When we add or remove elements, we need the sortable to 'refresh'
// so it can find the new/removed elements.
scope.$watch(attrs.ngModel+'.length', function() {
  // Timeout to let ng-repeat modify the DOM
  $timeout(function() {
    // ensure that the jquery-ui-sortable widget instance
    // is still bound to the directive's element
    if (!!element.data('ui-sortable')) {
      element.sortable('refresh');
    }
  }, 0, false);
});

Specifically, the check if (!!element.data('ui-sortable')) seems to be incorrect.

I initialize my ui-sortable as follows:

<ul
    data-ui-sortable="sortableOptions"
    data-ng-model="myModel">
</ul>

The check to see if the sortable instance is initialized normally returns a jQuery $.widget object, but in the cases where I get this error, it is just returning the string sortableOptions so it appears the check is occurring prior to the Angular compilation but still resulting in true because a string value is truthy. Of course, refresh cannot be called on an uninitialized sortable leading to this exception.

[thgreasi]

Sorry for the inconvenience. It seems that for now the data-ui-sortable directive declaration should be avoided since we are using this data property to check if jquery-ui- sortable widget is sill active on the element.

Will try to release a fix in the weekend.

[samuelhorwitz]

No worries. I fixed it downstream for myself for the time being. It was a trivial fix for what I needed but I don't know if it's the "right" fix in terms of the project, so I won't submit a pull request. Thanks again!

[thgreasi]

I wrote the e2e tests this morning and I will be working on the fix during this weekend (hopefully).

What worked for your use case?

I'm thinking of checking whether data('ui-sortable') is a jquery-ui widget object.

[samuelhorwitz]

I just changed it to this:

// When we add or remove elements, we need the sortable to 'refresh'
// so it can find the new/removed elements.
scope.$watch('ngModel.length', function() {
  // Timeout to let ng-repeat modify the DOM
  $timeout(function() {
    // ensure that the jquery-ui-sortable widget instance
    // is still bound to the directive's element
    uiSortableInstance = element.data('ui-sortable');

    if (!!uiSortableInstance && typeof uiSortableInstance != 'string') {
      element.sortable('refresh');
    }
  }, 0, false);
});

You're right that it's probably better to check that it is a jquery-ui widget object rather than check that it is not a string.

[thgreasi]

Just opened a PR to fix this.
element.sortable('instance') feels better than the old element.data('ui-sortable').

[samuelhorwitz]

Cool :) Thanks!