JQuery viene caricato solo all'aggiornamento della pagina nell'applicazione Rails 4

Ho creato un'applicazione Rails 4 e ho aggiunto la libreria fancybox per un effetto popup dell'immagine. Funziona bene ma solo quando la pagina viene aggiornata. Se la pagina non viene aggiornata dall'utente, jquery non funziona affatto. Ho provato a testarlo anche con metodi jquery piccoli, ma tutto funziona solo dopo l'aggiornamento della pagina. Sto anche usando twitter bootstrap.JQuery viene caricato solo all'aggiornamento della pagina nell'applicazione Rails 4

mie attività/application.js file:

//= 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(); 
     } 
    }); 
});

fonte

2013-07-26 vishB

funziona sulla prima caricamento della pagina e quando si fa clic su un altro collegamento non è così? Penso che tu abbia un problema con la libreria dei turbolinks. Rimuovi quella linea dal tuo file 'assets/javascript/application.js' (riga 5,' // = richiedi i turbolinks') e fammi sapere :) – Ian

Ehi, il tuo trucco ha funzionato, js sta caricando bene. Ma per quanto riguarda i turbolinks, non ne avrò bisogno in seguito? – vishB

Sono sorpreso che questo non sia un argomento più visibile/discusso ... È così comune usare jQuery e Turbolinks – mmcrae

180

Va bene, credo di aver capito il problema abbastanza per fornire una risposta. L'aspetto dell'utilizzo dei turbolinks è che la maggior parte dei plugin e delle librerie che si collegano all'evento pronto per il documento smettono di funzionare, poiché i turbolinks impediscono al browser di ricaricare la pagina. Ci sono trucchi per risolvere questi problemi, ma il modo più semplice per risolverli è usare jquery.turbolinks.

Per usarlo, basta aggiungere questo al vostro Gemfile:

gem 'jquery-turbolinks'

e questo al file assets/javascripts/application.js:

//= require jquery.turbolinks

e si dovrebbe essere pronti per partire.

FYI: Non avete davvero bisogno utilizzare turbolinks, ma è utile e fa le richieste più veloce, evitando un aggiornamento completo pagina. Turbolinks recupera il contenuto del collegamento su cui hai fatto clic tramite AJAX e lo visualizza nella stessa pagina, eliminando così il sovraccarico di ricaricare le risorse (JS e CSS). Cerca di far funzionare la tua pagina. Usando la libreria nel paragrafo precedente non ho avuto problemi reali. Più CSS e JS hai sulla tua pagina, maggiore sarà il miglioramento ottenuto usando i turbolinks.

fonte

2013-07-29 13:02:54 Ian

Grazie a Ian per aiuto e le informazioni speciali – vishB

ho avuto questo problema esatto, e lo hai inchiodato, grazie Ian. Ho capito che jquery non vincolava i miei ascoltatori di eventi alla pagina dopo un link_to reindirizzamento, e solo su un pageload. –

Sei più che benvenuto :) – Ian

Ian ha avuto una buona risposta, e questo è un add-on di sorta a che (in modo non mi lascia in realtà commento a chiunque al momento della scrittura.)

Da 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

Prima di non aver aggiunto require jquery.turbolinks nel punto giusto all'interno dell'elenco, quindi era un po 'pignolo. Poi ho aggiunto un nuovo modo e spero che funzioni meglio.

fonte

2014-03-13 08:21:15 CodeWalrus

+1 per le informazioni extra, i miei collegamenti continuavano a non funzionare finché non ho letto la tua risposta. – pob21

Non riuscivo a far funzionare le cose finché non ho seguito le risposte di CodeWalrus e Ian, ma per me c'era dell'altro. Come descritto su the jquery.turbolinks Readme, l'ordine deve essere molto specifico.

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

Inoltre, as described here, se avete messo l'applicazione javascript link nel footer per motivi di ottimizzazione della velocità, come ho avuto, si avrà bisogno di spostarlo nel tag <head> in modo che si carichi prima che il contenuto in Tag <body>.

fonte

2015-05-21 17:36:22 Karen

Questo ha funzionato per me. Sembra che sia essenziale spostare i file javascrip inclusi in testa. –

I turbolinks sono il problema qui.Turbolinks sono aggiunti nei binari per migliorare la performance della pagina web.Io ho questa soluzione lavoro

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

Fore maggiori dettagli fare riferimento this

fonte

2015-12-02 17:09:06 Unicornz

JQuery viene caricato solo all'aggiornamento della pagina nell'applicazione Rails 4

risposta

Problemi correlati