Как направить идентификатор элемента HTML, указанный в VisualForce, и передать функцию JavaScript?
-
10-10-2019 - |
Вопрос
У меня есть тег 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);
Решение 2
У меня есть решение моей проблемы.
$ 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>
Другие советы
Вы можете использовать $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}");