JQuery se carga solo en la actualización de la página en la aplicación Rails 4

Creé una aplicación de Rails 4 y agregué la biblioteca de fancybox para un efecto de imagen emergente. Funciona bien, pero solo cuando la página se actualiza. Si el usuario no actualiza la página, el jquery no funciona en absoluto. Intenté probarlo con pequeños métodos jquery también, pero todo funciona solo después de la actualización de la página. También estoy usando twitter bootstrap.

Mi archivo 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(); } }); }); 

Bueno, creo que entiendo tu problema lo suficiente como para dar una respuesta. Lo que pasa con el uso de turbolinks es que la mayoría de los complementos y bibliotecas que se unen al evento listo para documentos dejan de funcionar, ya que turbolinks evita que el navegador vuelva a cargar la página. Hay trucos para solucionar esos problemas, pero la forma más fácil de solucionarlo es usar jquery.turbolinks .

Para usarlo, simplemente agrega esto a tu Gemfile :

 gem 'jquery-turbolinks' 

y esto a su archivo assets/javascripts/application.js :

 //= require jquery.turbolinks 

y deberías ser bueno para ir.

FYI : Realmente no necesita usar turbolinks, pero es útil y agiliza las solicitudes al evitar una actualización completa de la página. Turbolinks obtiene los contenidos del enlace que hizo clic a través de AJAX y los muestra en la misma página, lo que elimina la sobrecarga de la recarga de activos (JS y CSS). Intenta hacer que tu página funcione con eso. Usando la biblioteca en el párrafo anterior, no tuve problemas reales. Cuantos más CSS y JS tenga en su página, mayor será la mejora que obtenga al utilizar turbolinks.

Ian tuvo una buena respuesta, y esta es una especie de complemento a eso (SO no me permitirá comentar a nadie al momento de escribir).

Desde 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 

Antes no había agregado require jquery.turbolinks en el lugar correcto dentro de la lista, por lo que estaba siendo un poco exigente. Luego agregué esto de una nueva manera y espero que funcione mejor.

No pude hacer que las cosas funcionaran hasta que seguí las respuestas de CodeWalrus y de Ian, pero para mí había algo más. Como se describe en el archivo Léame de jquery.turbolinks , el orden debe ser muy específico.

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

Además, como se describe aquí , si has puesto el enlace javascript de la aplicación en el pie de página por razones de optimización de velocidad, como yo lo hice, necesitarás moverlo a la etiqueta para que se cargue antes que el contenido en el etiqueta.

Los Turbolinks son el problema aquí. Los Turbolinks se agregan en Rails para mejorar el rendimiento de la página web. Tengo esta solución funcionando

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

Para obtener más detalles, consulte esto