title: Rails 5 - html5sortable - sortable is not a function at HTMLDocument.ready
body: <p>I am trying to implement <a href="https://github.com/voidberg/html5sortable" rel="nofollow noreferrer">HTML5 Sortable</a> but I am getting the following error in the console:</p>
  
  <blockquote>
    <p>Uncaught TypeError: $(...).sortable is not a function
        at HTMLDocument.ready (checklistentries.self-d4e56bc….js?body=1:6)
        at fire (jquery.self-bd7ddd3….js?body=1:3233)
        at Object.add [as done] (jquery.self-bd7ddd3….js?body=1:3292)
        at jQuery.fn.init.jQuery.fn.ready (jquery.self-bd7ddd3….js?body=1:3543)
        at HTMLDocument. (checklistentries.self-d4e56bc….js?body=1:8)
        at HTMLDocument.dispatch (jquery.self-bd7ddd3….js?body=1:5227)
        at HTMLDocument.elemData.handle (jquery.self-bd7ddd3….js?body=1:4879)
        at Object.t.dispatch (turbolinks.self-c5acd7a….js?body=1:6)
        at r.t.Controller.r.notifyApplicationAfterPageLoad (turbolinks.self-c5acd7a….js?body=1:6)
        at r.t.Controller.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 (anonymous) @
    checklistentries.self-d4e56bc….js?body=1:8 dispatch @
    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 (anonymous) @
    turbolinks.self-c5acd7a….js?body=1:6</p>
  </blockquote>
  
  <p>The html.sortable.js file is in app/assets/javascripts. </p>
  
  <p>application.js:</p>
  
  <pre><code>//= require jquery
  //= require autoNumeric
  //= require jquery_ujs
  //= require html.sortable
  //= require turbolinks
  //= require bootstrap-sprockets
  //= require_tree .
  </code></pre>
  
  <p>checklistentries.js.coffee:</p>
  
  <pre><code>$(document).on 'turbolinks:load', -&gt;
    ready = undefined
  
    ready = -&gt;
      $('.sortable').sortable()
      return
  
    $(document).ready ready
  </code></pre>
  
  <p>Page source:</p>
  
  <pre><code>&lt;script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/autoNumeric.self-dd668fd42a127caa6d3fdfe8fd18684196d330083a7d8ec688340565e75c84c1.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/html.sortable.self-fe26e0358d49c3b13b9a3d2b9116424ce1c281726e09b2b49e024336e6f233e5.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/transition.self-6ad2488465135ab731a045a8ebbe3ea2fc501aed286042496eda1664fdd07ba9.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/alert.self-742145c5bb847aafdadc6e339be795628f8bc25f177e851f03a8c42278eb0312.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/button.self-126ac9bf0e7f2d8568f8da3a00fd5f0fac6eae0946331003370161fbf8d7975e.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/carousel.self-e47323f363ceb3dc0bdbce05e36e709ed428e339833a41140a85cb0af24b8127.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/collapse.self-2eb697f62b587bb786ff940d82dd4be88cdeeaf13ca128e3da3850c5fcaec301.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/dropdown.self-561cca1cbaf67474e01e9536f106bad541594860a6df997004591c1c1957a147.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/modal.self-3e78617ade5663314b7ee0ea10375a5b34d59ffbade44939e3f2a4e4ef2019b3.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/tab.self-5bf7078b682f8b131332eefa46b45fa5eff2eca745fc0d03e2991450888f7c28.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/affix.self-6d6f1a7fc5c8aabf3547fa1b794fab6268f54bc55ad815e55873c71f52513517.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/scrollspy.self-969f3c5f48cdf1e439c7fa1154c13b948715f5c689f87837c0b64521d3b46ef6.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/tooltip.self-05afb177e08f98997ccfc84fa08a215e4b27d48d5fe4d049080675e9dffd8199.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap/popover.self-0aa93860b59fe7393f1dd490f54b3cb994f9d6155adffce034d4e14ae361b041.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap-sprockets.self-fbfa5ad7d9aa0afe439ec4ff3883acc4cb92b62cb67c40d674320c9aa1d4642d.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  &lt;script src="/assets/checklistentries.self-d4e56bc9119282b12909790c4eade57cd2ab3add9f726eb06ec3c34e986a1f24.js?body=1" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I'm at a loss as to why it's not recognizing the sortable function, which is clearly in the html.sortabla.js file that I got from the github repo per the instructions and that js is being loaded prior to my page's. Please help!</p>