Рейки, JavaScript не завантажується після натискання посилання на помічник

У мене виникають проблеми із завантаженням мого javascript, коли я використовую помічник link_to в rails. Коли я або вручну вводжу URL-адресу з 'localhost: 3000 / products / new', або перезавантажую сторінку, завантажується javascript, але коли я переходжу за посиланням, як написано нижче, jQuery $(document).readyне завантажується на новій сторінці.

Link_to, javascript не завантажується, коли я натискаю це посилання:

<%= link_to "New Product", new_product_path %>

файл products.js

$(document).ready(function() {
    alert("test");
});

Будь-яка допомога буде дуже вдячна. Спасибі заздалегідь!

Ви використовуєте Rails 4? (Дізнайтеся, виконуючи rails -vна своїй консолі)

Ця проблема, ймовірно, пов’язана з нещодавно доданою перлиною Turbolinks . Це змушує вашу програму поводитися як односторінкова програма JavaScript. Він має кілька переваг ( це швидше ), але, на жаль, він порушує деякі існуючі події, наприклад, $(document).ready()оскільки сторінка ніколи не перезавантажується. Це пояснювало б, чому JavaScript працює під час безпосереднього завантаження URL-адреси, але не під час переходу до нього через link_to.

Ось RailsCast про Турболінки .

Є кілька рішень. Ви можете використовувати jquery.turbolinks як виправлення, що випадає, або ви можете переключити свою $(document).ready()заяву, а не використовувати 'page:change'подію Turbolinks :

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

Крім того, ви можете зробити щось подібне для сумісності зі звичайними завантаженнями сторінок, а також Turbolinks:

var ready = function() {
    // do stuff here.
};

$(document).ready(ready);
$(document).on('page:change', ready);

Якщо ви використовуєте Ruby on Rails> 5 (це можна перевірити, запустивши rails -vв консолі), використовуйте 'turbolinks:load'замість'page:change'

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

Я отримав ті самі проблеми, але jquery.turbolinks не допомогло. Я помітив, що я повинен замінити метод GET.

Ось мій зразок:

<%= link_to 'Edit', edit_interpreter_path(@interpreter), method: :get %>

Якщо ви перебуваєте на рейці 5, замість 'page:change'вас слід використовувати 'turbolinks:load'наступне:

$(document).on('turbolinks:load', function() {
  // Should be called at each visit
})

Джерело: https://stackoverflow.com/a/36110790

Ви також можете обернути своє посилання div, який визначає data-no-turbolink.

Приклад:

<div id="some-div" data-no-turbolink>
    <a href="/">Home (without Turbolinks)</a>
</div>

Джерело: https://github.com/rails/turbolinks

Переконайтеся, що у вас немає вбудованих <script>тегів. (Вбудовані теги скриптів погані з турболінками).

FWIW, з документів Turbolinks , найбільш доцільна подія для захоплення замість $(document).readyis page:change.

page:load має застереження, що він не спрацьовує при перезавантаженні кешу ...

У DOM завантажено новий елемент тіла. Не спрацьовує при частковій заміні або при відновленні сторінки з кешу, щоб не запускати двічі на одному тілі.

А оскільки Турболінкс просто змінює погляд, page:changeце доречніше.

Рішенням, яке вирішило мою проблему, було додавання цієї мета властивості.

<meta name="turbolinks-visit-control" content="reload">

Це гарантує, що відвідування певної сторінки завжди спричинить повне перезавантаження.

Це було неймовірно корисно для роботи над рішенням для вирішення проблеми, яка у мене виникала з цим, https://github.com/turbolinks/turbolinks#reloading-when-assets-change .