Как направить идентификатор элемента HTML, указанный в VisualForce, и передать функцию JavaScript?

Question

У меня есть тег Apex, который генерирует входное текстовое поле.

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

Когда кто -то нажимает на это поле, я хочу выполнить JavaScript.

Но когда я проверяю источник HTML, этот тег Apex, который становится входным тегом, имеет (я думаю) динамически сгенерированная часть.

   <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 выражение может использоваться только в коде VisualForce, не внутри JavaScript, насколько мой поиск.

Ниже код работает нормально. Он выводит значение в поле InputText в сообщение JS Alert Теперь вы можете передать атрибут 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}");

Одна вещь, которая стоит опасаться, заключается в том, что ваш элемент содержится в нескольких уровнях тегов 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}");