Comment référencer l'ID d'élément html spécifié dans visualforce et passer à la fonction javascript?

Question

J'ai une étiquette apex qui génère le champ de texte d'entrée.

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

Lorsque quelqu'un clique sur ce champ, je veux exécuter javascript.

Mais quand je vérifie la source HTML, cette balise apex qui devient une balise d'entrée a (je pense) une partie générée dynamiquement.

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

Comme vous pouvez le voir id a une partie indésirable :(

id="j_id0:j_id3:j_id4:c_txt" 

Dans mon Javascript, je suis en train de getElementById('c_txt'), mais cela ne fonctionne pas bien sûr. Comment gérer cette ???

MISE À JOUR

On dirait que je peux le faire, mais ne fonctionne pas ...

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

Les spectacles d'alerte de null 'si quelque chose doit être faux.

Même cette alerte renvoie null ...

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

Answer 1

j'ai eu solution à mon problème. $ L'expression de la force de frappe globale compoente ne peut être utilisée que dans le code de Visualforce et non pas dans Javascript aussi loin que ma recherche.

Le code ci-dessous fonctionne correctement. Il renvoie la valeur dans le champ inputText au message d'alerte js. Vous pouvez maintenant transmettre l'attribut id au Javascript et traiter n'importe quelle tâche.

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

Vous pouvez utiliser la notation $Component en javascript, vous l'utilisez comme ceci:

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

Une chose à se méfier de bien, est si votre élément est contenu dans plusieurs niveaux de balises Visualforce qui have IDs:

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