AngularJS - jQuery - ui-sortable g.sortable is not a function

Question

I am creating a table with dragable rows with the help of ui-sortable

<tbody ui-sortable="sortableOptions" ng-model="model.list">
   <tr ng-repeat="item in model.list">
      <td>
          <div class="form-group">
              <input type="text" class="form-control test-input" ng-model="item.Country" ng-readonly="!isEditable">
          </div>
      </td>
      <td>
          <div class="form-group">
              <input type="text" class="form-control test-input" ng-model="item.Value" ng-readonly="!isEditable">
          </div>
      </td>
   </tr>

This is the code in controller.

$scope.sortableOptions = {
            update: function(e, ui) {

                console.log(model.list);
            },
            stop: function(e, ui) {

                console.log(model.list);
            }
        };

I have made use of require.js and the dependency ui.sortable is added over there.

Whenever I open the page with this table, I am getting this error -

angular.js:12520 TypeError: g.sortable is not a function at w (http://localhost:90/bower_components/angular-ui-sortable/sortable.min.js:8:4649) at x (http://localhost:90/bower_components/angular-ui-sortable/sortable.min.js:8:4721) at link (http://localhost:90/bower_components/angular-ui-sortable/sortable.min.js:8:5003) at http://localhost:90/bower_components/angular/angular.js:8835:44 at invokeLinkFn (http://localhost:90/bower_components/angular/angular.js:8841:9) at nodeLinkFn (http://localhost:90/bower_components/angular/angular.js:8335:11) at compositeLinkFn (http://localhost:90/bower_components/angular/angular.js:7731:13) at nodeLinkFn (http://localhost:90/bower_components/angular/angular.js:8330:24) at compositeLinkFn (http://localhost:90/bower_components/angular/angular.js:7731:13) at compositeLinkFn (http://localhost:90/bower_components/angular/angular.js:7734:13) <tbody ui-sortable="sortableOptions" ng-model="model.list" class="ng-pristine ng-untouched ng-valid ng-isolate-scope">

Can you please help me out? Thanks in advance

othman.Da · Accepted Answer · 2016-10-14 14:23:52Z

7

ui-sortable depends on jQuery, jQuery UI 1.9+. Check if you have these dependencies before ui-sortable js file, then you should inject the ui.sortable in the correct module angular.module('myapp', ['ui.sortable']);

answered Oct 14, 2016 at 14:23

othman.Da

6414 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Arjun Varrier Over a year ago

The version of jQuery I am using is 2.1 and the injection of ui.sortable is also correct.

Arjun Varrier Over a year ago

Is there something else that I am missing?

othman.Da Over a year ago

Did you add the jQuery UI ?

Arjun Varrier Over a year ago

Require config was creating the problem... the injections were correct.

Naila Akbar · Accepted Answer · 2018-01-15 06:41:50Z

2

Anyone who is facing same issue but seems to have everything correct like;

1. jQuery is loaded.
2. angular-ui-sortable is being loaded correctly.
3. You've injected its dependency. 
   angular.module('myapp', ['ui.sortable']);
4. The code appears to be correct in the view

Make sure you have included jquery-ui after jquery and before sortable js files. I was running with same issue and after a full time headache found this solution here in this thread.

answered Jan 15, 2018 at 6:41

Naila Akbar

3,3886 gold badges37 silver badges79 bronze badges

Comments

Vishal Vaghasiya · Accepted Answer · 2023-08-08 11:58:24Z

0

Requirements in UI.Sortable directive

AngularJS v1.2+

JQuery v3.1+
JQueryUI v1.12+

If use jQuery v1.x & v2.x then add UI.Sortable v0.14.x versions

answered Aug 8, 2023 at 11:58

Vishal Vaghasiya

2,1203 gold badges17 silver badges21 bronze badges

Collectives™ on Stack Overflow

AngularJS - jQuery - ui-sortable g.sortable is not a function

3 Answers 3

4 Comments

Comments

Requirements in UI.Sortable directive

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Requirements in UI.Sortable directive

Comments

Your Answer

Sign up or log in

Post as a guest

Related