2014-09-10 50 views
5

實現這一問題(或它的味道)被廣泛記載已經但是儘管我的調查和閱讀中,我仍然無法解決這個問題,是...軌jquery.turbolinks JavaScript的不點火

的Rails 4應用具有以下寶石安裝:

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 

我的application.js清單如下:

//= 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 

我有以下_form.h一個客戶提供樣板tml.erb部分:

<%= 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 %> 

我customer.js.coffee腳本文件是:

# 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 

當我直接加載客戶編輯頁面或使用瀏覽器的刷新按鈕有場刷新頁面分配給它的類'selectpicker'會選擇bootstrap-select-rails gem格式的選擇字段並應用bootstrap-select-rails select的更新外觀(這是正確的行爲)。但是,如果我在客戶模型頁面的任意位置選擇了一個導軌鏈接,然後返回到客戶編輯頁面,則表單將不顯示bootstrap-select-rails gem中增強的選擇字段,而是顯示正常的默認引導程序選擇字段。

如果我再次使用瀏覽器按鈕重新加載頁面,則增強的選擇字段會被正確加載。

問題是我已經安裝了turbolinks和jQuery.turbolinks,並且application.js清單文件具有以正確順序加載的所有正確引用我很困惑,爲什麼jquery.turbolinks沒有處理加載的javascript在頁面加載和頁面自動更改?它似乎只在初始頁面加載(或瀏覽器刷新)和任何rails頁面更改不會重新加載JavaScript。

回答

6

我不知道你是否找到了解決問題的辦法。我曾在一個項目中,我目前正在研究同一個問題,我發現,在加入我的JavaScript文件控制器此代碼似乎解決的問題:

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

這對我來說非常有用!謝謝!!! – 2016-03-18 15:48:22

6

這解決了我的問題:

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

參考:Bootstrap-Select

0

也許你正在使用的咖啡來寫腳本,所以你可以這樣寫:

(($) -> 
    $(document).on 'page:change', -> 
    $('.dropdown-toggle').dropdown() 
    $('.selectpicker').selectpicker() 
) jQuery 
0

多一個辦法可以是這樣的:

$('.selectpicker').selectpicker('refresh'); 

從文檔:

以編程方式更新使用JavaScript 選擇,第一操縱選擇,然後使用刷新方法來更新UI以匹配新的狀態。在刪除或添加選項時或在禁用/啓用通過JavaScript選擇時,這是必需的。