JQuery загружается только при обновлении страницы в приложении Rails 4

Я создал приложение Rails 4 и добавил библиотеку fancybox для всплывающего эффекта изображения. Он отлично работает, но только при обновлении страницы. Если страница не обновляется пользователем, то jquery не работает вообще. Я также тестировал его с помощью небольших методов jquery, но все они работают только после обновления страницы. Я также использую twitter bootstrap.

Мой файл assets/application.js:

//= require jquery
//= require jquery_ujs
//= require fancybox
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .


$(document).ready(function() {
  $(".fancybox").fancybox();
    $("#hand").click(function(){
     if($("#check6").is(':visible'))
     {
      $("#check6").hide();
      }
     else
     {
      $("#check6").show();
      }
    });
});

Ответ 1

Хорошо, я думаю, что понимаю вашу проблему достаточно, чтобы дать ответ. Дело в использовании turbolinks заключается в том, что большинство плагинов и библиотек, которые привязываются к событию готовности документа, перестают работать, поскольку turbolinks не позволяет браузеру перезагружать страницу. Есть хитрости, чтобы исправить эти проблемы, но самый простой способ исправить это - использовать jquery.turbolinks.

Чтобы использовать его, просто добавьте его в свой Gemfile:

gem 'jquery-turbolinks'

и это в ваш файл assets/javascripts/application.js:

//= require jquery.turbolinks

и вам должно быть хорошо идти.

FYI: вам действительно не нужно использовать turbolinks, но это полезно, и он быстрее запрашивает запросы, избегая полного обновления страницы. Turbolinks получает содержимое ссылки, которую вы нажали через AJAX, и отображает ее на одной странице, что устраняет накладные расходы на перезарядку активов (JS и CSS). Попробуйте сделать свою страницу с ней. Используя библиотеку в предыдущем абзаце, у меня не было реальных проблем. Чем больше CSS и JS у вас есть на вашей странице, тем больше у вас улучшений с помощью turbolinks.

Ответ 2

У Иана был хороший ответ, и это одно из таких дополнений к этому (SO не позволит мне на самом деле комментировать кого-либо в момент написания.)

Из https://github.com/rails/turbolinks/#jqueryturbolinks:

Add the gem [gem 'jquery-turbolinks'] to your project, then add the following line to your JavaScript manifest file, after jquery.js but before turbolinks.js:

//= require jquery.turbolinks

До того, как я не добавил require jquery.turbolinks в нужное место в списке, так что это было немного придирчиво. Затем я добавил это по-новому, и я надеюсь, что он работает лучше.

Ответ 3

Я не мог заставить все работать, пока не последовал за ответами CodeWalrus и Ian, но для меня было больше. Как описано в jquery.turbolinks Readme, порядок должен быть очень специфичным.

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks

Кроме того, как описано здесь, если вы поместили ссылку javascript приложения в нижний колонтитул для причин оптимизации скорости, как и у меня, вам нужно будет переместить ее в тег <head>, чтобы он загружался до содержимого тега <body>.

Ответ 4

Проблемы с Turbolinks - это проблема. TurboLinks добавлены в рельсы для улучшения производительности webpage. У меня есть это решение, работающее

<%= link_to "Create New Form", sampleform_path, 'data-no-turbolink' => true %>

За дополнительной информацией обратитесь

Ответ 5

Удалить эту строку кода:

//= require turbolinks

Затем добавьте это:

//= require jquery.turbolinks