2014-05-02 18 views
9

C'è un modello nella mia applicazione di rotaie che non esegue il codice javascript la prima volta quando viene caricato facendo clic su un collegamento nella mia casa pagina. Succede solo quando si accede dal link e solo la prima volta. Non so perché sta succedendo. Qualsiasi aiuto? Ecco il codice.Javascript non viene eseguito la prima volta quando accedo a una pagina da un collegamento

Home page:

#app/views/static_pages/home.html.erb 
#... 
<%= link_to "Nofify an absence", new_cancellation_path %> 

questo è il file Javascript:

//app/assets/javascripts/cancellations_new.js 

var validateDateTime = function(){ 
// some other code that returns true or false 
    } 
    $(document).ready(function(){ 
    $("#new_cancellation").submit(function(event){ 
     event.preventDefault(); 
     if (validateDateTime()) { 
     alert("Some alert"); 
     } 
     else { 
     // some more code 
     } 
    }); 
    }); 

E il modello in cui il javascript deve essere eseguito:

#app/views/cancellations/new.erb 

<%= provide(:title, "Notify an absence")%> 
<div class="row"> 
<div class="span3 offset4"> 
    <h3> Notify an absence </h3> 

    <%= form_for @cancellation, :id => "new_cancellation" do |f| %> 
    <%= render 'shared/error_messages' %> 
    <% # some form elements...%> 
    <%= f.submit "Send", class: "btn btn-primary"%>   
    <% end %> 
</div> 
</div> 

Ho già provato ad aggiungere //= require cancellations_new allo app/assets/javascripts/application.js senza miglioramenti

EDIT

ho fatto qualche ricerca, seguendo l'esempio @radubogdan e ho scoperto che Turbolinks è responsabile per il comportamento "strano" di Javascript. Se hai attivato Turbolink nella tua applicazione, gli elementi <a> vengono caricati da una richiesta Ajax e quindi il contenuto viene utilizzato per modificare lo <body> del tuo codice HTML. Dal momento che il modo in cui il DOM è stato caricato, non è la solita, il codice scritto all'interno del

$(document).ready(){...}

non funziona a meno che la pagina viene ricaricata completamente (ad esempio aggiornando il browser). Se vuoi che il tuo JavaScript per funzionare come al solito, si potrebbe dover modificare la propria

$(document).ready(){...}

a

$(document).on("page:change", function() { // some more code. });

Potete trovare alcune ulteriori informazioni su questo argomento here
more

+0

Avete attivato i turbolinks? – radubogdan

+0

Sì, ce l'ho. – felix

+0

Hai provato a disattivarlo? Rimuovilo da application.js e da layout.html.erb dove usi il tag link stylesshet. Se funziona senza turbolinks, allora dovresti controllare come usare '$ (document) .on ('page: load', .....)' – radubogdan

risposta

6

Penso che il problema sia il turbolink. Hai provato a disattivarlo?

Rimuovere da application.js e da layout.html.erb dove si utilizza il tag di collegamento del foglio di stile.

Se funziona senza turbolinks, allora si dovrebbe checkout come utilizzare

$(document).on('page:load', .....)

Grazie

5

è sufficiente aggiungere nel vostro application.html.erb

<body data-no-turbolink="true" > 
    # your content 
</body> 

O

aggiungere questo al vostro gioiello file

gem 'jquery-turbolinks' 

entrambi funzioneranno secondo la vostra expection.

Problemi correlati