Cómo hacer referencia html Identificación del elemento especificado en Visualforce y pasar a la función de JavaScript?

Question

Tengo ápice etiqueta que generan campo de texto de entrada.

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

Cuando alguien hace clic en este campo, quiero ejecutar javascript.

Pero cuando compruebo el código HTML, esta etiqueta ápice que se convierte en la etiqueta de entrada tiene (creo) parte generado dinámicamente.

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

Como se puede ver de identificación tiene una parte no deseado: (

id="j_id0:j_id3:j_id4:c_txt"

En mi Javascript estoy tratando de getElementById('c_txt') pero esto no funciona, por supuesto. ¿Cómo lidiar con esto ???

Actualizar

Parece que puedo hacer esto pero no funciona ...

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

La alerta muestra 'nulo' así que algo debe estar mal.

Incluso esta alerta vuelve nula ...

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

Answer 1

Me dieron solución a mi problema.

$ compoent expresión global Visualforce sólo se puede utilizar en el código Visualforce no en el interior de Javascript por lo que mi búsqueda.

A continuación código funciona bien. Se da salida al valor en el campo inputText a js mensaje de alerta Ahora puede pasar atributo id al Javascript y el proceso sea cual sea la tarea necesaria.

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

Puede utilizar la notación $Component en javascript, lo usa de esta manera:

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

Una cosa a tener cuidado con los sin embargo, es si su elemento está contenido dentro de varios niveles de etiquetas Visualforce cuales tienen 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}");