Wie fügen Sie einen Onchange-Listener für Formularelemente in Ruby on Rails hinzu?

Question

Ich schreibe ein Formular in Ruby on Rails und möchte eine Auswahlbox haben, die eine Javascript-Funktion aufruft. In der Formulardatei, das ist die Linie, die ich versuchen bin mit ist das Auswahlfeld hinzuzufügen:

<%= f.select :question_select, Question.all, :prompt => "New Question", :onchange => "displayQuestion(this)" %> 

In meiner application.js Datei, ich habe nur:

function displayQuestion(link) { 
    alert("Changed question"); 
} 

Ich werde sein Wenn Sie diese Formularelemente dynamisch einer Seite hinzufügen, kann ich jQuery nicht einfach in der Datei application.js verwenden, um einem bestimmten Formularelement eine Funktion hinzuzufügen. Kann mir jemand sagen, was ich falsch mache?

Answer 1

Wie Sie vielleicht wissen, Rails 3 ermutigt stark UJS (unaufdringlich JavaScript), was im Grunde bedeutet, dass der JavaScript, das schwere Heben tut, und dass Sie sollen nicht Ihre clientseitige Interaktivität mit dem Formular-Generatoren binden . Ich würde empfehlen, etwas sehr ähnliches hier zu tun - nur weil Sie Elemente dynamisch hinzufügen, bedeutet das nicht, dass Sie jQuery nicht verwenden können, um nach Änderungen zu suchen.

in Ihrer Vorlage:

<%= f.select :question_select, Question.all, {prompt: "New Question"}, data: { question: true } %> 

Dies schafft so etwas wie die folgenden:

<select id="..." data-question="true"> 
    ... 
</select> 

Dann in JavaScript, Sie Ereignis Delegation verwenden können mit data-question Satz für change Ereignisse auf ein beliebiges Element zu sehen über das gesamte Dokument:

$(function() { 
    $(document).on('change', '[data-question]', function() { 
    // this == the element that fired the change event 
    alert('Changed question'); 
    }); 
}); 

---

Hinweis: Statt data-question zu verwenden, können Sie einfach eine Klasse auf das Element hinzufügen und ändern Sie Ihre jQuery diese Klasse zu verwenden:

$(function() { 
    $(document).on('change', '.question', function() { 
    // this == the element that fired the change event 
    alert('Changed question'); 
    }); 
}); 

Ich versuche, im Allgemeinen die Verwendung von CSS-Selektoren zu minimieren in meinem JavaScript, damit Designer sie jederzeit ändern können, ohne die Dinge zu ändern, aber es funktioniert genauso gut.

Answer 2

select_tag :variable, options_from_collection_for_select(:all, :id, :name), :onchange => 'your_onchange_handler()'