JQuery ładuje się tylko przy odświeżaniu strony w aplikacji Rails 4

Stworzyłem aplikację Rails 4 i dodałem bibliotekę fancybox dla efektu popup. Działa dobrze, ale tylko wtedy, gdy strona jest odświeżana. Jeżeli strona nie jest odświeżana przez użytkownika to jquery w ogóle nie działa. Próbowałem go przetestować za pomocą małych metod jquery, ale wszystkie działają dopiero po odświeżeniu strony. Używam również Twittera bootstrap.

Moje aktywa/wniosek.plik 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();
      }
    });
});
Author: Adrian Mann, 2013-07-26
Source

4 answers

Ok, myślę, że rozumiem twój problem na tyle, by udzielić odpowiedzi. Rzecz w korzystaniu z turbolinks jest taka, że większość wtyczek i bibliotek, które wiążą się ze zdarzeniem document ready, przestaje działać, ponieważ turbolinks uniemożliwia przeglądarce przeładowanie strony. Istnieją sztuczki, aby rozwiązać te problemy, ale najprostszym sposobem na naprawienie tego jest użycie jquery.turbolinks .

Aby go użyć, po prostu dodaj to do swojego Gemfile: 

gem 'jquery-turbolinks'

I to do twojego assets/javascripts/application.js pliku: 

//= require jquery.turbolinks

I powinieneś bądź gotowy.

FYI: tak naprawdę nie potrzebujesz, aby używać turbolinków, ale jest to przydatne i przyspiesza żądania, unikając pełnego odświeżania strony. Turbolinks pobiera zawartość łącza klikniętego przez AJAX i renderuje go na tej samej stronie, eliminując w ten sposób obciążenie zasobów przeładowujących (JS i CSS). Postaraj się, aby Twoja strona działała z nim. Korzystanie z biblioteki w poprzednim akapicie nie miałem żadnych rzeczywistych problemów. Im więcej CSS i JS masz na swojej stronie, tym większy ulepszenie można uzyskać za pomocą turbolinków.

 181
Author: Ian,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-07 03:10:51

Ian miał dobrą odpowiedź, a ten jest swego rodzaju dodatkiem do tego (więc nie pozwól mi właściwie skomentować nikomu w momencie pisania.)

Z 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

Zanim nie dodałem require jquery.turbolinks we właściwym miejscu listy, więc było to trochę wybredne. Następnie dodałem ten nowy sposób i mam nadzieję, że działa lepiej.

 17
Author: CodeWalrus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-13 08:21:15

Nie mogłem działać, dopóki nie zastosowałem się do odpowiedzi Codewalrusa i Iana, ale dla mnie było to coś więcej. Jak opisano na jquery.turbolinks Readme , kolejność musi być bardzo konkretna.

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

Również, jak opisano tutaj , jeśli umieściłeś link JavaScript aplikacji w stopce ze względu na optymalizację prędkości, jak miałem, trzeba będzie przenieść go do znacznika <head> tak, że ładuje się przed treścią w znaczniku <body>.

 8
Author: Karen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-21 17:36:22

Turbolinki są tutaj problemem.Turbolinks są dodawane w rails, aby poprawić wydajność strony internetowej.Mam To rozwiązanie działa

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

Aby uzyskać więcej szczegółów, zapoznaj się z this

 5
Author: Unicornz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:18:04