2013-07-26 2 views
78

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

Мои активы/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(); 
     } 
    }); 
}); 
+6

ли работа на первой загрузке страницы и при нажатии другой ссылке он не делает? Я думаю, что у вас есть проблема с библиотекой turbolinks. Удалите эту строку из файла 'assets/javascript/application.js' (строка 5,' // = require turbolinks') и дайте мне знать :) – Ian

+0

Эй, твой трюк работал, js загружается отлично. Но как насчет I turbolinks, мне это не понадобится позже? – vishB

+2

Я удивлен, что это не более заметная/обсуждаемая тема ... Это так распространено, что я использую jQuery, а также Turbolinks – mmcrae

ответ

180

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

Чтобы использовать его, просто добавьте это к вашему Gemfile:

gem 'jquery-turbolinks' 

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

//= require jquery.turbolinks 

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

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

+1

Спасибо Ian за помощь и специальную информацию – vishB

+0

У меня была эта точная проблема, и вы прибили ее, спасибо Ян. Я понял, что jquery не привязывал моих прослушивателей событий к странице после перенаправления link_to и только на pageload. –

+1

Вы более чем приветствуются :) – Ian

17

Ян был хороший ответ, и это один является дополнением сортов в том, что (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 в нужное место в списке, так что это было немного придирчиво. Затем я добавил это по-новому, и я надеюсь, что он работает лучше.

+2

+1 за дополнительную информацию, мои ссылки все еще не работали, пока я не прочитал ваш ответ. – pob21

8

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

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

Кроме того, as described here, если вы поставили приложения Java-ссылки в футере по причинам оптимизации скорости, как я, вам нужно будет переместить его в <head> тег так, чтобы он загружался до содержания в <body> бирка.

+0

Это сработало для меня. Кажется, что необходимо переместить включенные файлы javascrip в голову. –

5

Проблемы с турбонаддувом здесь. Турбовинты добавлены в рельсы для улучшения производительности веб-страницы.У меня это решение работает

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

Фор подробнее см this

Смежные вопросы