rails jquery.turbolinks javascript not firing after page change -
realise issue (or flavours of it) documented despite investigation , reading still can't resolve issue, being...
rails 4 application 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 git://github.com/ifad/data-confirm-modal.git (at master) using datetimepicker-rails 3.1.1 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 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 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 customers model 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 }) |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 behaviors , hooks related matching controller here. # logic automatically available in application.js. # can use coffeescript in 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 load customer edit page directly or refresh page using browsers refresh button fields have class 'selectpicker' assigned pick bootstrap-select-rails gem formatted select field , applies updated , feel of bootstrap-select-rails select (which correct behaviour). if select rails link anywhere within customer model pages , return customer edit page form renders without enhanced select fields bootstrap-select-rails gem, instead normal default bootstrap select field displayed.
if reload page using browser button again enhanced select fields correctly loaded.
question given have turbolinks , jquery.turbolinks installed , application.js manifest file has correct references loaded in correct order confused why jquery.turbolinks isn't handling loading of javascript on both page load , page change automatically? appears working on initial page load (or browser refresh) , rails page changes not reload javascript.
i don't know if found solution problem. had same issue on project i'm working on, , found adding code in javascript controller file seems solve problem:
$(document).on('page:load', function(){ $('.selectpicker').selectpicker(); }); 
Comments
Post a Comment