रूबी पर रूबी में फॉर्म तत्वों के लिए एक परिवर्तनीय श्रोता कैसे जोड़ें?

Question

मैं रूबी पर रूबी में एक फॉर्म लिख रहा हूं और एक चुनिंदा बॉक्स रखना चाहता हूं जो जावास्क्रिप्ट फ़ंक्शन को कॉल करता है। प्रपत्र फ़ाइल में, इस लाइन मैं सलेक्ट बॉक्स जोड़ने की कोशिश करने के लिए उपयोग कर रहा हूँ है:

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

मेरी application.js फ़ाइल में, मैं तो बस है:

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

मैं बनने जा रही हूँ गतिशील रूप से इन फ़ॉर्म तत्वों को किसी पृष्ठ पर जोड़ना, इसलिए मैं किसी विशिष्ट फ़ॉर्म तत्व में फ़ंक्शन जोड़ने के लिए application.js फ़ाइल में jQuery का उपयोग नहीं कर सकता। क्या कोई मुझे बता सकता है कि मैं क्या गलत कर रहा हूं?

Answer 1

आपको बता दें कि, रेल 3 दृढ़ता से UJS (विनीत जावास्क्रिप्ट), जो मूल रूप से है कि जावास्क्रिप्ट बड़े कार्य करने का मतलब होता है को प्रोत्साहित करती है, और आप अपने प्रपत्र जनरेटर के साथ में अपने क्लाइंट साइड अन्तरक्रियाशीलता टाई नहीं करनी चाहिए कि । मैं यहां कुछ ऐसा ही करने की अनुशंसा करता हूं - सिर्फ इसलिए कि आप गतिशील रूप से तत्व जोड़ रहे हैं इसका मतलब यह नहीं है कि आप उन पर परिवर्तनों के लिए jQuery का उपयोग नहीं कर सकते हैं।

अपने टेम्पलेट में:

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

यह निम्नलिखित की तरह कुछ बनाता है:

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

फिर, जावास्क्रिप्ट में, आप data-question सेट के साथ किसी भी तत्व पर change घटनाओं के लिए देखने के लिए घटना प्रतिनिधिमंडल उपयोग कर सकते हैं पूरे दस्तावेज़ पर:

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

---

नोट: इसके बजाय data-question का उपयोग करने का, तो आप बस एक वर्ग तत्व को जोड़ सकते हैं, और फिर अपने jQuery संशोधित उस वर्ग का उपयोग करें:

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

मैं आम तौर पर में CSS चयनकर्ताओं का उपयोग कम करने की कोशिश मेरी जावास्क्रिप्ट ताकि डिजाइनर उन्हें चीजों को तोड़ने के बिना जो कुछ भी चाहते हैं उन्हें बदलने के लिए स्वतंत्र हों, लेकिन यह भी काम करता है।

Answer 2

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