Come aggiungere un listener onchange per gli elementi del modulo in Ruby on Rails?

Question

Sto scrivendo un modulo in Ruby on Rails e voglio avere una casella di selezione che chiami una funzione Javascript. Nel file di modulo, questa è la linea che sto usando per provare ad aggiungere la casella di selezione:

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

Nel mio file application.js, devo solo:

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

sto per essere aggiungendo dinamicamente questi elementi del modulo a una pagina, quindi non posso usare jQuery nel file application.js per aggiungere una funzione a un elemento del modulo specifico. Qualcuno può dirmi cosa sto facendo di sbagliato?

Answer 1

Come forse sapete, Rails 3 incoraggia fortemente UJS (JavaScript discreto), che in pratica significa che il codice JavaScript fa il lavoro pesante, e che non si dovrebbe legare l'interattività lato client con il tuo generatori di forma . Consiglierei di fare qualcosa di molto simile qui - solo perché stai aggiungendo elementi dinamicamente non significa che non puoi usare jQuery per controllare le modifiche su di essi.

Nel modello:

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

questo crea qualcosa di simile al seguente:

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

Poi, in JavaScript, è possibile utilizzare la delega evento da guardare per change eventi su qualsiasi elemento con data-question set sull'intero documento:

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

---

Nota: Invece di utilizzare data-question, si potrebbe semplicemente aggiungere una classe all'elemento, e quindi modificare il tuo jQuery per utilizzare tale classe:

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

Io in genere cerco di minimizzare l'uso di selettori CSS nel mio JavaScript in modo che i progettisti siano liberi di cambiarli in qualsiasi cosa desiderino senza rompere le cose, ma funziona altrettanto bene.

Answer 2

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