Come fare riferimento all'ID elemento html specificato in visualforce e passare alla funzione javascript?

Question

Ho un tag apex che genera un campo di testo di input.

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

Quando qualcuno fa clic su questo campo, voglio eseguire javascript.

Ma quando controllo il codice sorgente HTML, questo tag apex che diventa tag di input ha (penso) una parte generata dinamicamente.

<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"> 

Come si può vedere ID è spazzatura parte :(

id="j_id0:j_id3:j_id4:c_txt" 

Nel mio JavaScript Sto cercando di getElementById('c_txt'), ma questo non funziona, naturalmente. Come affrontare questo ???

UPDATE

sembra che io possa fare questo, ma non funziona ...

<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); 

Gli spettacoli alert 'nullo' quindi qualcosa deve essere sbagliato.

Anche questo avviso restituisce null ...

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

Answer 1

ho avuto soluzione al mio problema.

$ L'espressione di Visualforce globale composta può essere utilizzata solo nel codice visualforce non all'interno di Javascript fino alla ricerca.

Il codice riportato di seguito funziona correttamente. Emette il valore nel campo inputText al messaggio di avviso js Ora puoi passare l'attributo id al Javascript ed elaborare qualsiasi attività necessaria.

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

È possibile utilizzare la $Component la notazione in javascript, lo si utilizza in questo modo:

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

Una cosa da diffidare di se, è se il vostro elemento è contenuto all'interno di vari livelli di tag Visualforce che avere ID:

<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}");