Uncaught TypeError: $(...).sortable is not a function in Rails 6

Question

Strugle alot but couldn't solve this problem. It been nightmare for me. I am using rails 6. and jquery ui "jquery-ui": "^1.13.0". I have added gem gem 'acts_as_list' and added yarn as yarn add jquery-ui.

I have added in application.js file

`require("jquery-ui/ui/widget")
 require("jquery-ui/ui/widgets/sortable")`

and added the code

$(document).on("turbolinks:load", () => {
$("#employeeLevel").sortable({
  handle: '.handle',
  update: function(e, ui) {
    Rails.ajax({
      url: $(this).data("url"),
      type: "PATCH",
      data: $(this).sortable('serialize'),
      success: function(result){
        console.log('my msg'+result);
      }
    });
  }
 });
})

In index.html.slim addded an id as

tbody id="employeeLevel" data-url="<%= sort_employee_levels_path %>"

Waiting for your response. Thank you in advance

Answer 1

This is what I require for sortable:

import 'jquery'
import 'jquery-ui/themes/base/core.css'
import 'jquery-ui/themes/base/theme.css'
import 'jquery-ui/ui/widgets/sortable'
import 'jquery-ui/themes/base/sortable.css'

You may need to expose jQuery in config/webpack/environment.js:

// Expose jQuery to scripts external to webpack
environment.loaders.append('expose', {
  test: require.resolve('jquery'),
  loader: 'expose-loader',
  options: {
    exposes: ['$', 'jQuery']
  }
})