jquery - document.ready no se activó con pjax

ruby-on-rails-3 coffeescript

Question

Estoy probando pjax para una aplicación que estoy desarrollando, pero he chocado contra la pared.

Tal vez estoy haciendo esto de la manera incorrecta, déjame explicarte.

En la aplicación, tengo un menú principal en la parte superior, con las diferentes secciones. Cada uno de los enlaces en este menú está habilitado para pjax, lo que significa que solo cambiará el cuerpo de la aplicación.

Normalmente, cuando haces clic en un enlace sin pjax, se iniciará el método document.ready. Lo uso para vincular eventos a botones como el siguiente ejemplo.

aquí está mi archivo users.js.coffee

loaded = false;
$ ->
$("#btn_new_user").bind "click", (event) ->
if not loaded
@path = $(''#btn_new_user'').attr("path")
$("#new-users-container").load(@path)
loaded = true
$("#new-users-container").slideToggle()

Como puede ver en este ejemplo, cuando la página "usuarios" termine de cargarse, enlazará un botón con un evento que cargará un formulario en un div y lo animará para mostrarlo.

Sin embargo, cuando comienzo en una sección diferente del administrador y hago clic en el enlace Usuarios para mostrar este botón, el evento no está enlazado. Cuando vuelvo a cargar la página en la sección Usuarios, el documento se activa y el botón funciona bien.

¿Hay una mejor técnica para vincular los eventos a los botones o hay alguna forma de activar document.ready en pjax?

Gracias.

Answer 1

Ok, aprendí un par de cosas ayer.

En primer lugar, declarar coffeescript de esa manera hará que el código esté disponible solo para ese archivo y no se pueda acceder a él en ningún otro lado.

La forma más común de solucionar esto es, por ejemplo,

Users =
aMethod: ->
// some code
window.Users = Users

entonces en otro lugar puedes hacer

window.aMethod

de todos modos, eso era solo parte del problema, la solución real era utilizar el método delegado http://api.jquery.com/delegate/ , que le permite vincular elementos sin que estén allí.

Answer 2

Así es como estoy haciendo esto actualmente.

1. Use el enlace delegado como se indica aquí para eventos.

2. Para otras inicializaciones, impleméntalo de esta forma (en JavaScript sin procesar)

   window.pjax_load = function() {
   $(''#foo'').do_whatever();
   ...
   }
   $(document).ready(function() {
   // setup events etc
   window.pjax_load();
   $(''a'').pjax( "#container" );
   $(''#container'').on(''pjax:end'', function() { window.pjax_load(); });
   });

Answer 3

Esto funcionará perfecto:
Todo lo que necesita hacer es incluir su script luego de completar la solicitud de pjax.

Include Pjaxstandalone.js here then
<script type=''text/javascript''>
pjax.connect({
''container'': ''content'',
''beforeSend'': function(){console.log("before send");},
''complete'': function(){
console.log("done!");
// Your custom script here
}
});
</script>

Espero eso ayude..!!