Javascript wird nicht zuverlässig ausgeführt - RoR4

Question

Ich habe ein Problem, bei dem ich Javascript verwende, um alle Kontrollkästchen zu aktivieren/deaktivieren, aber wenn ich zu einer Seite von einer anderen URL navigiere, wird das Formular nicht gesendet. Wenn ich die Seite aktualisiere oder die URL direkt eingib, funktioniert sie. Ich dachte, dies könnte ein Turbolink-Problem sein, aber ich habe kein Problem mit anderen Javascript auf der Website. Ich lade das JS am Ende der Seite, nachdem alles andere geladen wurde.

Mein Code ist wie folgt:

$(document).ready(function(){ 
    var checkboxes = $("input[type='checkbox']"); 
    if(checkboxes.prop("checked")){ 
     document.getElementById("check_all").innerHTML = "Deselect All"; 
    } 
    else { 
     document.getElementById("check_all").innerHTML = "Select All"; 
    } 
    $('#check_all').on("click", function() { 
    if(checkboxes.prop("checked")){ 
     checkboxes.prop("checked",false); 
     document.getElementById("check_all").innerHTML = "Select All"; 
    } 
    else { 
     checkboxes.prop("checked",true); 
     document.getElementById("check_all").innerHTML = "Deselect All"; 
    } 
    }); 
}); 

Ich bin mit Rails 4, das tue ich manchmal einen Fehler, der wie folgt lautet: Uncaught Typeerror: Kann nicht gesetzt Eigenschaft ‚innerHTML-‘ von null

Answer 1

Es ist wahrscheinlich ein Turbolinks Problem.

Ihr Code innerhalb des Handlers für das Ereignis $(document).ready, das ausgelöst wird, wenn die Seite genügend geladen hat, um JS-Vorgänge im DOM auszuführen. Das ist normalerweise die richtige Praxis für solche Dinge, aber mit Turbolinks ist es anders.

Turbolinks fängt Linkklicks ab und anstatt die Seite neu zu laden, erstellt es eine AJAX-Anfrage für den Körper der gewünschten Seite und tauscht sie für den Körper der aktuellen Seite ein. Dies macht das $(document).ready Ereignis unzuverlässig - es kann nicht ausgelöst werden. Anstatt also feuert Turbolinks ein Ereignis, wenn es den Seiteninhalt ändern: page:change

statt

$(document).ready(function(){ 

Verwendung

$(document).on('page:change', function() {