Rails 5: как использовать $(document).ready() с турбо-ссылками

Ответ 1

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

К сожалению, Turbolinks 5 (это версия, появившаяся в Rails 5) была переписана и не использует те же имена событий, что и в предыдущих версиях Turbolinks, в результате чего ответы, упомянутые выше, терпят неудачу. Теперь вы можете прослушать turbolinks: загрузить следующее:

$( document ).on('turbolinks:load', function() {
  console.log("It works on each visit!")
})

Ответ 2

Native JS:

document.addEventListener("turbolinks:load", function() {
    console.log('It works on each visit!');
});

Ответ 3

Это мое решение, переопределить jQuery.fn.ready, затем $(document).ready работает без каких-либо изменений:

jQuery.fn.ready = (fn)->
  $(this).on 'turbolinks:load', fn

Ответ 4

Вот решение, которое работает для меня, здесь:

• установить gem 'jquery-turbolinks'

• добавьте этот файл. coffee в ваше приложение: https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

• назовите его turbolinks-compatibility.coffee

• в application.js

  //= require jquery
  //= require jquery_ujs
  //= require jquery.turbolinks
  //= require turbolinks
  //= require turbolinks-compatibility
  

Ответ 5

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

  addCallback: (callback) ->
if $.turbo.isReady
  callback($)
$document.on 'turbo:ready', -> callback($)

в

  addCallback: (callback) ->
if $.turbo.isReady
  callback($)
$document.on 'turbolinks:load', -> callback($)

Я еще не знаю, что это не решает, но, похоже, он хорошо работал при первоначальной проверке.

Ответ 6

В рельсах 5 самым простым решением является использование:

$(document).on('ready turbolinks:load', function() {});

Вместо $(document).ready. Работает как шарм.

Ответ 7

Используйте легкий жемчуг jquery-turbolinks.

Он делает $(document).ready() работу с Turbolinks без изменения существующего кода.

В качестве альтернативы вы можете изменить $(document).ready() на один из:

$(document).on('page:fetch', function() { /* your code here */ });

$(document).on('page:change', function() { /* your code here */ });

в зависимости от того, какой из них более уместен в вашей ситуации.

Ответ 8

Использую: $(document).on 'turbolinks:load', ->

Вместо: $(document).on('turbolinks:load', function() {...})