rails jquery.turbolinks javascript not firing after page change

Question

Realise this issue (or flavours of it) is widely documented already but despite my investigation and reading I still can't resolve this issue, being...

Rails 4 application with the following gems installed:

Using rake 10.3.2
Using i18n 0.6.11
Using json 1.8.1
Using minitest 5.4.1
Using thread_safe 0.3.4
Using tzinfo 1.2.2
Using activesupport 4.1.4
Using builder 3.2.2
Using erubis 2.7.0
Using actionview 4.1.4
Using rack 1.5.2
Using rack-test 0.6.2
Using actionpack 4.1.4
Using mime-types 1.25.1
Using polyglot 0.3.5
Using treetop 1.4.15
Using mail 2.5.4
Using actionmailer 4.1.4
Using activemodel 4.1.4
Using arel 5.0.1.20140414130214
Using activerecord 4.1.4
Using execjs 2.2.1
Using autoprefixer-rails 3.0.1.20140826
Using bcrypt 3.1.7
Using sass 3.2.19
Using bootstrap-sass 3.2.0.2
Using bootstrap-select-rails 1.6.2
Using thor 0.19.1
Using railties 4.1.4
Using bootswatch-rails 3.2.4
Using breadcrumbs_on_rails 2.3.0
Using cancan 1.6.10
Using coffee-script-source 1.8.0
Using coffee-script 2.3.0
Using coffee-rails 4.0.1
Using data-confirm-modal 1.0.1 from git://github.com/ifad/data-confirm-modal.git (at master)
Using datetimepicker-rails 3.1.1 from git://github.com/zpaulovics/datetimepicker-rails.git (at master)
Using orm_adapter 0.5.0
Using warden 1.2.3
Using devise 3.3.0
Using hike 1.2.3
Using multi_json 1.10.1
Using tilt 1.4.1
Using sprockets 2.11.0
Using intellij-coffee-script-debugger 0.0.1 from git://github.com/JetBrains/intellij-coffee-script-debugger.git (at master)
Using jbuilder 2.1.3
Using jquery-rails 3.1.2
Using sprockets-rails 2.1.4
Using sass-rails 4.0.3
Using jquery-datatables-rails 2.2.3
Using turbolinks 2.3.0
Using jquery-turbolinks 2.1.0
Using momentjs-rails 2.7.0
Using nested_form 0.3.2
Using pg 0.17.1
Using bundler 1.6.4
Using rails 4.1.4
Using rdoc 4.1.1
Using sdoc 0.4.1
Using simple_form 3.1.0.rc2
Using spring 1.1.3
Using sqlite3 1.3.9
Using uglifier 2.5.3
Using will_paginate 3.0.7

My application.js manifest is as follows:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require_self
//= require_tree .
//= require bootstrap-sprockets
//= require data-confirm-modal
//= require allPages
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require locales/bootstrap-datetimepicker.hu
//= require dataTables/jquery.dataTables
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
//= require jquery_nested_form
//= require bootstrap-select
//= require bootstrap/alert
//= require bootstrap/dropdown
//= require turbolinks

I have a customers model with the following _form.html.erb partial:

<%= simple_form_for(@customer, html: { class: 'form-horizontal' },
  wrapper: :horizontal_form,
  wrapper_mappings: {
    check_boxes: :horizontal_radio_and_checkboxes,
    radio_buttons: :horizontal_radio_and_checkboxes,
    file: :horizontal_file_input,
    boolean: :horizontal_boolean
 }) do |f| %>
<%= f.error_notification %>
<fieldset>
  <div class="form-inputs">
    <%= f.input :code, required: true %>
    <%= f.input :name, required: true %>
    <%= f.input :location, required: true, 
                    :collection => LookupValue.joins(:lookup).where(lookups: { :name => 'Location' }).order(name: :asc).pluck(:name), 
                    :include_blank => false, 
                    input_html: { class: 'selectpicker' } %>
        <%= f.input :service_level, 
                    :collection => LookupValue.joins(:lookup).where(lookups: { :name => 'Service level' }).order(name: :asc).pluck(:name), 
                    :include_blank => false,
                    input_html: { class: 'selectpicker' } %>
        <%= f.input :golive_date, :as => :date_picker %>
        <%= f.input :connection_type, 
                    :collection => LookupValue.joins(:lookup).where(lookups: { :name => 'Connection type' }).order(name: :asc).pluck(:name), 
                    :include_blank => false,
                    input_html: { class: 'selectpicker' } %>
        <%= f.input :service_centre, 
                    :collection => LookupValue.joins(:lookup).where(lookups: { :name => 'Service centre' }).order(name: :asc).pluck(:name), 
                    :include_blank => false,
                    input_html: { class: 'selectpicker' } %>
        <%= f.input :end_date, :as => :date_picker %>
        <%= f.input :sla, 
                    :collection => LookupValue.joins(:lookup).where(lookups: { :name => 'SLA' }).order(name: :asc).pluck(:name), 
                    :include_blank => false,
                    input_html: { class: 'selectpicker' } %>
        <%= f.input :project_code %>
      </div>

  <div class="form-actions">
     <%= f.button :submit, :class => "btn btn-primary" %>
  </div>
</fieldset>
<% end %>

My customer.js.coffee script file is:

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/

jQuery ->
  $('#customers').dataTable
    sPaginationType: "full_numbers"
    bProcessing: true
    bServerSide: true
    sAjaxSource: $('#customers').data('source')
    iDisplayLength: 200
    oLanguage:
      sLengthMenu: "Display <select>" + "<option value=\"50\">50</option>" + "<option value=\"100\">100</option>" + "<option value=\"300\">300</option>" + "<option value=\"-1\">All</option>" + "</select> records"

  $(".selectpicker").selectpicker

When I load the customer edit page directly or refresh the page using the browsers refresh button the fields that have the class 'selectpicker' assigned to it pick up the bootstrap-select-rails gem formatted select field and applies the updated look and feel of the bootstrap-select-rails select (which is correct behaviour). However if I select a rails link anywhere within the customer model pages and then return to the customer edit page the form renders without the enhanced select fields from the bootstrap-select-rails gem, instead the normal default bootstrap select field are displayed.

If I reload the page using the browser button again the enhanced select fields are correctly loaded.

Question is given I have turbolinks and jQuery.turbolinks installed and the application.js manifest file has all the correct references loaded in the correct order I am confused as to why jquery.turbolinks isn't handling the loading of the javascript on both page load and page change automatically? It appears to only be working on initial page load (or browser refresh) and any rails page changes does not reload the javascript.

Answer 1

I don't know if you found a solution to your problem. I had the same issue on a project I'm currently working on, and I found that adding this code in my javascript controller file seems to solve the problem:

$(document).on('page:load', function(){
    $('.selectpicker').selectpicker();
});

Answer 2

This solved my problem :

$(document).on('page:load', function(){
  $('.selectpicker').selectpicker('render');
});

Reference : Bootstrap-Select