Rails 5 - html5sortable - sorttable не является функцией в HTMLDocument.ready

Question

Я пытаюсь реализовать HTML5 Sortable, но я получаю следующую ошибку в консоли:

Uncaught TypeError: $ (...). Sortable не является функцией в HTMLDocument.ready (checklistentries.self-d4e56bc….js? Body=1:6) при пожаре (jquery.self-bd7ddd3….js? Body=1:3233) в Object.add [как сделано] (jquery.self-bd7ddd3….js? Body=1:3292) в jQuery.fn.init.jQuery.fn.ready (jquery.self-bd7ddd3….js? Body=1:3543) в HTMLDocument. (checklistentries.self-d4e56bc….js?body=1:8) в HTMLDocument.dispatch (jquery.self-bd7ddd3….js?body=1:5227) в HTMLDocument.elemData.handle (jquery.self-bd7ddd3….js?body=1:4879) в Object.t.dispatch (turbolinks.self-c5acd7a….js?body=1:6) в rtController.r.notifyApplicationAfterPageLoad (turbolinks.self-c5acd7a….js?body=1:6) at rtController.r.pageLoaded (turbolinks.self-c5acd7a….js? Body=1:6) ready @ checklistentries.self-d4e56bc….js? Body=1:6 fire @ jquery.self-bd7ddd3….js?body=1:3233 add @ jquery.self-bd7ddd3….js?body=1:3292 jQuery.fn.ready @ jquery.self-bd7ddd3….js?body=1:3543 (анонимно) @ checklistentries.self-d4e56bc….js?body=1:8 отправка @ jquery.self-bd7ddd3….js?body=1:5227 elemData.handle @ jquery.self-bd7ddd3….js?body=1:4879 t.dispatch @ turbolinks.self-c5acd7a….js?body=1:6 t.Controller.r.notifyApplicationAfterPageLoad @ turbolinks.self-c5acd7a….js?body=1:6 t.Controller.r.pageLoaded @ turbolinks.self-c5acd7a….js?body=1:6 (анонимно) @ turbolinks.s? Эльф-c5acd7a....js тело = 1: 6

Файл html.sortable.js находится в app / assets / javascripts.

application.js:

//= require jquery
//= require autoNumeric
//= require jquery_ujs
//= require html.sortable
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

checklistentries.js.coffee:

$(document).on 'turbolinks:load', ->
  ready = undefined

  ready = ->
    $('.sortable').sortable()
    return

  $(document).ready ready

Исходный текст страницы:

<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/autoNumeric.self-dd668fd42a127caa6d3fdfe8fd18684196d330083a7d8ec688340565e75c84c1.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/html.sortable.self-fe26e0358d49c3b13b9a3d2b9116424ce1c281726e09b2b49e024336e6f233e5.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/transition.self-6ad2488465135ab731a045a8ebbe3ea2fc501aed286042496eda1664fdd07ba9.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/alert.self-742145c5bb847aafdadc6e339be795628f8bc25f177e851f03a8c42278eb0312.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/button.self-126ac9bf0e7f2d8568f8da3a00fd5f0fac6eae0946331003370161fbf8d7975e.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/carousel.self-e47323f363ceb3dc0bdbce05e36e709ed428e339833a41140a85cb0af24b8127.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/collapse.self-2eb697f62b587bb786ff940d82dd4be88cdeeaf13ca128e3da3850c5fcaec301.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/dropdown.self-561cca1cbaf67474e01e9536f106bad541594860a6df997004591c1c1957a147.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/modal.self-3e78617ade5663314b7ee0ea10375a5b34d59ffbade44939e3f2a4e4ef2019b3.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/tab.self-5bf7078b682f8b131332eefa46b45fa5eff2eca745fc0d03e2991450888f7c28.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/affix.self-6d6f1a7fc5c8aabf3547fa1b794fab6268f54bc55ad815e55873c71f52513517.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/scrollspy.self-969f3c5f48cdf1e439c7fa1154c13b948715f5c689f87837c0b64521d3b46ef6.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/tooltip.self-05afb177e08f98997ccfc84fa08a215e4b27d48d5fe4d049080675e9dffd8199.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/popover.self-0aa93860b59fe7393f1dd490f54b3cb994f9d6155adffce034d4e14ae361b041.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap-sprockets.self-fbfa5ad7d9aa0afe439ec4ff3883acc4cb92b62cb67c40d674320c9aa1d4642d.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/checklistentries.self-d4e56bc9119282b12909790c4eade57cd2ab3add9f726eb06ec3c34e986a1f24.js?body=1" data-turbolinks-track="reload"></script>

Я в недоумении, почему он не распознает сортируемую функцию, которая явно находится в файле html.sortabla.js, который я получил из репозитория github в соответствии с инструкциями, и что js загружается до моей страницы. Пожалуйста помоги!

Answer 1

Это правильный вызов сортируемого:

$(document).on 'turbolinks:load', ->
  sortable('.sortable')

Спасибо всем!