rails 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.html.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 и применяют обновленный внешний вид bootstrap-select-rails select (что является правильным поведением). Однако, если я выбираю ссылку rails в любом месте страниц модели клиента, а затем возвращаюсь на страницу редактирования клиента, форма отображается без расширенных полей выбора из гема bootstrap-select-rails, вместо этого отображается обычное поле выбора начальной загрузки по умолчанию.

Если я снова перезагружу страницу с помощью кнопки браузера, расширенные поля выбора будут правильно загружены.

Задан вопрос, у меня установлены turbolinks и jQuery.turbolinks, а в файле манифеста application.js есть все правильные ссылки, загруженные в правильном порядке. Я не понимаю, почему jquery.turbolinks не обрабатывает загрузку javascript при загрузке обеих страниц. а страницы меняются автоматически? Похоже, он работает только при начальной загрузке страницы (или обновлении браузера), и любые изменения страницы рельсов не перезагружают javascript.


person shwashbuckle    schedule 10.09.2014    source источник


Ответы (4)


Не знаю, нашли ли вы решение своей проблемы. У меня была такая же проблема в проекте, над которым я сейчас работаю, и я обнаружил, что добавление этого кода в мой файл контроллера javascript, похоже, решает проблему:

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

Это решило мою проблему:

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

Ссылка: Bootstrap-Select

person Ashwin    schedule 07.10.2015

Вероятно, вы используете кофе для написания своего скрипта, поэтому вы можете написать это:

(($) ->
  $(document).on 'page:change', ->
    $('.dropdown-toggle').dropdown()
    $('.selectpicker').selectpicker()
) jQuery
person ruzenhack    schedule 26.06.2016

еще один подход может быть таким:

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

из документов:

Чтобы программно обновить select с помощью JavaScript, сначала манипулируйте select, а затем используйте метод обновления для обновления пользовательского интерфейса в соответствии с новым состоянием. Это необходимо при удалении или добавлении параметров или при отключении / включении выбора с помощью JavaScript.

person Stef Hej    schedule 14.01.2017