VisualForceで指定されたHTML要素IDを参照し、JavaScript関数に渡す方法は？

Question

入力テキストフィールドを生成するApexタグがあります。

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

誰かがこのフィールドをクリックしたら、JavaScriptを実行したいと思います。

しかし、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にはジャンクパーツがあります:(

id="j_id0:j_id3:j_id4:c_txt"

私のjavascriptで私はしようとしています 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

私は自分の問題の解決策を得ました。

$ Compoent Global VisualForce Expressionは、私の検索に関してはJavaScript内ではないVisualForceコードでのみ使用できます。

以下のコードは正常に動作します。 inputTextフィールドの値をJSアラートメッセージに出力します。これにより、ID属性をJavaScriptに渡して、必要なタスクを処理できます。

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 JavaScriptの表記、あなたはそれをそうするように使用します：

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

ただし、注意すべきことの1つは、IDを持つ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}");