Rails, javascript non si carica dopo aver cliccato attraverso link_to helper

Question

Sto avendo qualche problema a caricare il mio javascript quando uso un link_per helper in rail. Quando inserisco manualmente l'url con 'localhost: 3000/products/new' o ricarico la pagina, il javascript si carica, ma quando passo attraverso un link come scritto sotto, il jQuery $(document).ready non si caricherà sulla nuova pagina.

link_to, javascript non viene caricato quando clicco questo link: SCHEDA

<%= link_to "New Product", new_product_path %> 

products.js

$(document).ready(function() { 
    alert("test"); 
}); 

Qualsiasi aiuto sarebbe molto apprezzato. Grazie in anticipo!

Answer 1

Stai utilizzando Rails 4? (Scopri facendo rails -v nella tua console)

Questo problema è probabilmente dovuto alla gemma Turbolinks appena aggiunta. Rende la tua applicazione si comporta come un'applicazione JavaScript singola pagina. Ha alcuni vantaggi (it's faster), ma sfortunatamente rompe alcuni eventi esistenti come $(document).ready() perché la pagina non viene mai ricaricata. Questo spiegherebbe il motivo per cui JavaScript funziona quando carichi l'URL direttamente, ma non quando lo navighi attraverso un link_to.

Ecco uno RailsCast su Turbolinks.

Ci sono un paio di soluzioni. È possibile utilizzare jquery.turbolinks come una correzione drop-in, oppure si può cambiare la sua dichiarazione $(document).ready() utilizzare invece l'evento Turbolinks 'page:change':

$(document).on('page:change', function() { 
    // your stuff here 
}); 

In alternativa, si potrebbe fare qualcosa di simile per la compatibilità con caricamento della pagina regolari così come Turbolinks:

var ready = function() { 
    // do stuff here. 
}; 

$(document).ready(ready); 
$(document).on('page:change', ready); 

Se si utilizza Ruby on Rails> 5 (è possibile controllare eseguendo rails -v nella console) Uso 'turbolinks:load' invece di 'page:change'

$(document).on('turbolinks:load', ready); 

Answer 2

Ho avuto lo stesso probleme ma jquery.turbolinks non ha aiutato. Ho notato che devo scavalcare il metodo GET.

c'è il mio campione:

<%= link_to 'Edit', edit_interpreter_path(@interpreter), method: :get %> 

Answer 3

Si può anche avvolgere il legame con un div che specifica i dati-no-TurboLink.

Esempio:

<div id="some-div" data-no-turbolink> 
    <a href="/">Home (without Turbolinks)</a> 
</div> 

Fonte: https://github.com/rails/turbolinks

Answer 4

Assicurarsi non si dispone di alcuna linea <script> tag. (I tag di script in linea sono negativi con i turbolinks).

Answer 5

FWIW, dal Turbolinks docs, l'evento più appropriato da catturare al posto dello $(document).ready è page:change.

page:load ha un avvertimento che non si attiva sulla ricarica della cache ...

Un nuovo elemento del corpo è stato caricato nel DOM. Non attiva la sostituzione parziale o quando una pagina viene ripristinata dalla cache, in modo da non sparare due volte sullo stesso corpo.

E poiché Turbolinks è solo il passaggio della vista, page:change è più appropriato.

Answer 6

Se siete su rotaie 5 invece di 'page:change' si dovrebbe usare 'turbolinks:load' come questo:

$(document).on('turbolinks:load', function() { 
    // Should be called at each visit 
}) 

Fonte: https://stackoverflow.com/a/36110790