Creé una aplicación Rails 4 y agregué la biblioteca fancybox para un efecto emergente de imagen. Funciona bien pero solo cuando se actualiza la página. Si el usuario no actualiza la página, jquery no funciona en absoluto. Intenté probarlo con pequeños métodos jquery también, pero todos funcionan 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();
}
});
});
assets/javascript/application.jsarchivo (línea 5//= require turbolinks) y avíseme :)Respuestas:
De acuerdo, creo que entiendo tu problema lo suficiente como para darte 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 document ready 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 sencilla de solucionarlos es utilizar jquery.turbolinks .
Para usarlo, simplemente agregue esto a su
Gemfile:gem 'jquery-turbolinks'y esto a su
assets/javascripts/application.jsarchivo://= require jquery.turbolinksy deberías estar listo para empezar.
FYI : Realmente no necesita usar turbolinks, pero es útil y hace solicitudes más rápido al evitar una actualización de página completa. Turbolinks recupera el contenido del enlace en el que hizo clic a través de AJAX y lo muestra en la misma página, eliminando así la sobrecarga de recargar activos (JS y CSS). Intenta que tu página funcione con él. Usando la biblioteca en el párrafo anterior no he tenido problemas reales. Cuanto más CSS y JS tenga en su página, mayor será la mejora que obtendrá al usar turbolinks.
fuente
//= require jquery.turbolinksdebe ser posterior//= require jquerypara que funcione github.com/kossnocorp/jquery.turbolinksIan tuvo una buena respuesta, y esta es una especie de complemento a eso (SO no me dejará comentarle a nadie al momento de escribir).
De 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.turbolinksAntes no había agregado
require jquery.turbolinksen el lugar correcto dentro de la lista, por lo que estaba siendo un poco exigente. Luego agregué esto de una manera nueva y espero que funcione mejor.fuente
No pude hacer que las cosas funcionaran hasta que seguí las respuestas de CodeWalrus y de Ian, pero para mí había 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 turbolinksAdemás, como se describe aquí , si ha puesto el enlace de javascript de la aplicación en el pie de página por motivos de optimización de la velocidad, como lo hice yo, deberá moverlo a la
<head>etiqueta para que se cargue antes que el contenido de la<body>etiqueta.fuente
Los enlaces turbo son el problema aquí. Los enlaces turbo se agregan en rieles 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 más detalles, consulte este
fuente
Quite esta línea de código:
//= require turbolinksLuego agregue este:
//= require jquery.turbolinksfuente