Wie HTML-Element-ID in Visual angegeben beziehen und auf JavaScript-Funktion übergeben?

Question

Ich habe APEX-Tag, das Eingabetextfeld erzeugen.

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

Wenn jemand dieses Feld klickt, möchte ich Sie Javascript auszuführen.

Aber wenn ich die HTML-Quelle überprüfen, diese Spitze Tag, die Input-Tag wird hat (glaube ich) dynamisch generierte Teil.

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

Wie Sie id hat Junk-Teil sehen: (

id="j_id0:j_id3:j_id4:c_txt"

In meinem Javascript Ich versuche zu getElementById('c_txt') aber dies nicht funktioniert natürlich. Wie mit diesem ???

beschäftigen

UPDATE

Scheint, wie ich dies tun können, aber nicht funktioniert ...

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

Der Alarm zeigt 'null' so etwas nicht in Ordnung sein muss.

Auch diese Warnung kehrt null ...

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

Answer 1

Ich habe Lösung für mein Problem.

$ compoent globaler Visual Ausdruck kann nur in Visual Code verwendet wird, nicht innerhalb von Javascript soweit meine Suche.

Im Folgenden Code funktioniert gut. Es gibt den Wert in dem Feld zu input js Warnmeldung Jetzt können Sie id-Attribut auf die Javascript und Prozess unabhängig von der Aufgabe benötigt werden.

übergeben

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

Sie haben die $Component Notation in Javascript verwenden können, verwenden Sie es wie folgt:

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

Eine Sache vorsichtig zu sein, obwohl, wenn Ihr Element in mehreren Ebenen von Visualforce-Tags enthalten ist, die IDs haben:

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