Chosen JQuery not loading in rails

Question

I'm following this tutorial on how to add tags to posts, problem is in the post form ,the chosen jquery plugin doesn't take effect. It should look like this:

but here's what I'm getting instead, no autocomplete and i can't select multiple tags:

My application.js

//= require rails-ujs
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require chosen
//= require turbolinks
//= require_tree
//= require semantic-ui
//= require social-share-button

application.css.scss

 *= require_tree .
 *= require_self
 *= require chosen
 *= require social-share-button
 */

gemfile

   source 'https://rails-assets.org' do
      gem 'rails-assets-tether', '>= 1.3.3'
      # add the line below
      gem 'rails-assets-chosen'

Chosen script at the bottom of my application.html.erb

<script>
  $(document).on('ready page:load', function () {
    $('#post_tag_ids').chosen({
      allow_single_deselect: true,
      width: '100%'
    })
  });
</script>

Answer 1

Check out the guide on Working with JavaScript in Rails and in particular section 5.2 Page Change Events .

You'll likely need to use:

$(document).on 'turbolinks:load'

Because, as the guide says,

Turbolinks overrides the normal page loading process

Personally, I remove Turbolinks from all of my projects. But, I'm odd that way.