[Force.comでWeb制作]Visualforceタグで発行されたHTMLタグのID

By |11月 26, 2009|Force.comでWeb制作, |


Visualforceタグから生成されるHTMLタグは全て、HTMLのID属性をVisualforecによって自動生成されます。Visualforceページ内に自分でJavaScriptを記述してVisualforceタグと混在したページ操作を行う場合には、この動的に生成されるIDにアクセスすると便利です。

例えば、こんなソースの場合

[php]
<apex:page>
<apex:form>
<apex:pageBlock id="thePageBlock">
<apex:pageBlockSection id="theSection">
<apex:pageBlockSectionItem id="theSectionItem"/>
</apex:pageBlockSection>
<apex:pageBlockButtons id="theButtons">
<apex:outputPanel onclick="alert(‘{!$Component.theSection.theSectionItem}’);">
click here
</apex:outputPanel>
</apex:pageBlockButtons>
</apex:pageBlock>
</apex:form>
</apex:page
[/php]

thePageBlockにDOM操作するには$Component.thePageBlockというグローバル変数にアクセスすると該当HTMLタグのIDが返されます。$Component.thePageBlockの中には動的に生成されたIDが格納されています。それとは別にtheSectionItemにアクセスする場合は、$Component.theSection.theSectionItemという風に階層構造を指定してアクセスする必要があります。結果的にこのページでは、具体的にはj_id0:j_id1:thePageBlock:theSection:theSectionItemというIDが出てきます。

上記ソースを貼り付けたページをForce.com Sitesで公開しておいたので、参考までに。
http://abeuhuru-developer-edition.na2.force.com/idtest

参考:Using JavaScript to Reference Components