विज़ुअलफोर्स में निर्दिष्ट HTML तत्व आईडी का संदर्भ कैसे लें और जावास्क्रिप्ट फ़ंक्शन पर पास करें?

Question

मेरे पास शीर्ष टैग है जो इनपुट टेक्स्ट फ़ील्ड उत्पन्न करता है।

<apex:page id="my_page"> 
    <apex:inputText id="foo" id="c_txt"></apex:inputText> 
</apex:page> 

जब कोई इस फ़ील्ड पर क्लिक करता है, तो मैं जावास्क्रिप्ट निष्पादित करना चाहता हूं।

लेकिन जब मैं HTML स्रोत की जांच करता हूं, तो यह शीर्ष टैग जो इनपुट टैग बनता है (मुझे लगता है) गतिशील रूप से जेनरेट किया गया हिस्सा है।

<input type="text" size="50" value="Tue Nov 16 00:00:00 GMT 2010" 
name="j_id0:j_id3:j_id4:c_txt" id="j_id0:j_id3:j_id4:c_txt"> 

आप आईडी देख सकते हैं जंक हिस्सा :(

id="j_id0:j_id3:j_id4:c_txt" 

है मेरी जावास्क्रिप्ट मैं getElementById('c_txt') कोशिश कर रहा हूँ में, लेकिन यह निश्चित रूप से काम नहीं करता। कैसे से निपटने के लिए इस ???

अद्यतन

लगता है मैं यह कर सकता की तरह लेकिन काम नहीं कर रहा ...

<apex:includeScript value="{!URLFOR($Resource.datepickerjs)}"></apex:includeScript> 

<apex:inputText id="foo" id="c_txt" onclick="javascript:displayDatePicker()" /> 

datepickerjs

var elem = getElementById('c_txt'); 
alert(elem); 

चेतावनी शो 'अशक्त' तो कुछ गलत किया जाना चाहिए।

यहां तक ​​कि इस चेतावनी अशक्त रिटर्न ...

var targetDateField = document.getElementById('{!$Component.my_page:c_txt}'); 
alert(targetDateField); 

Answer 1

मैं मेरी समस्या का हल मिल गया।

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

नीचे कोड ठीक काम करता है। यह इनपुट टेक्स्ट क्षेत्र में जेएस अलर्ट संदेश में मान आउटपुट करता है अब आप जावास्क्रिप्ट में आईडी विशेषता पास कर सकते हैं और जो भी कार्य आवश्यक है उसे संसाधित कर सकते हैं।

Created Date: <apex:inputText id="dah" value="{!created}" size="50" 
onclick="javascript:go('{!$Component.dah}')"></apex:inputText> 

<script> 
    function go(field) { 
    var huh = document.getElementById(field).value; 
    alert(huh); //returns the string u put inside of input text field 
    } 
</script> 

Answer 2

आप जावास्क्रिप्ट में $Component संकेतन का उपयोग कर सकते हैं, तो आप यह इतना की तरह उपयोग करें:

var e = document.getElementById("{!$Component.ComponentId}"); 

एक बात हालांकि से सावधान रहना करने के लिए, यदि आपका तत्व Visualforce टैग के कई स्तरों के भीतर निहित है है जो आईडी हैं:

<apex:pageBlock id="theBlock"> 
    <apex:pageBlockSection id="theBlockSection"> 
     <apex:commandLink action="{!someAction}" value="LINK!" id="theLink"/> 

// snip 

// in javascript you would reference this component using: 
document.getElementById("{!$Component.theBlock.theSection.theLink}");