Implementing this problem (or its tastes) has been documented for a long time, but despite my research and reading, I still cannot solve this problem by being ...
Rails 4 application with the following stones 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 manifest application.js 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 client 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:
# 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 client’s editing page directly or refresh the page using the browser refresh button, the fields for which the selectpicker class is assigned select the bootstrap-select-rails formatted format selection box and apply the updated look and feel of choosing bootstrap-select-rails ( which is the correct behavior). However, if I select a link to the rails anywhere on the client model pages and then return to the client editing page, the form will be displayed without extended selection fields from the bootstrap-select-rails bundle, instead, the default boot selection box will be displayed.
If I reload the page using the browser button, fields with extended fields will load correctly.
The question is asked. I have installed turbolinks and jQuery.turbolinks, and the application.js manifest file has all the correct links loaded in the correct order. I am confused about why jquery.turbolinks does not handle javascript loading on both page loading and page changing automatically? It looks like it only works on the initial page load (or browser refresh), and any changes to the rails page do not reload javascript.