試験管のなかのコード

[Cloud] <apex:*> タグを jQuery で操作する

Salesforce の Visualforce Page で利用できる <apex:*> タグ (<apex:outputText>, <apex:outputPanel>, etc) は HTML にレンダリングされた際に少々クセのある ID を持つ。 jQuery にその ID を利用する方法をメモ。

apex タグは HTML にレンダリングされる際、(自動割り当てを含む) ID を持つ直近の親の ID と自身の ID を結合した文字列を HTML タグの ID として付与される。 例えば、下記の <apex:outputPanel> は HTML では "page:form:block:panel" という ID を持つ <div> タグとして展開される。

<apex:page id="page" >
  <apex:form id="form" >
    <apex:pageBlock id="block" >
      <apex:outputPanel layout="block" id="panel" />
    </apex:pageBlock>
  </apex:form>
</apex:page>

この "page:form:block:panel" を $("#page:form:block:panel") の様にそのまま jQuery の selector として利用しても動作しない。 selector で特殊な意味を持つ ":" をエスケープすることで jQuery でも利用可能となる。 上記の例では、$("#page\:form\:block\:panel") となる。

サンプル

<apex:page id="page" >
  <apex:includeScript value="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"/>
  <apex:form id="form" >
    <apex:pageBlock id="block" >
      <apex:outputPanel layout="block" id="panel" />
      <script type="text/javascript" language="javascript">
        var jq$ = jQuery.noConflict();
        function escapeVisualforceId(vfid) {
          return vfid.replace(/:/g,'\\:');
        }
        jq$(document).ready(function() {
          jq$('#' + escapeVisualforceId('page:form:block:panel')).text("Hello World");
        });
      </script>
    </apex:pageBlock>
  </apex:form>
</apex:page>