SFDC VF jQuery ID問題 - Memos About Salesforce

こんにちは、管理人の@Salesforce.Zです。

VisualforcepageでjQueryを使うでしょう

IDやクラスでタグの値をとれなかったか

今回、VFにてjQueryでタグの値を取得する注意点を

共有したいと思います。

欲しけりゃくれてやる・・・。

探せ！

この世の全てをそこに置いてきた〜笑

VFのapex tag Id 構成がjQueryに相性が悪い
解決方法

VFのapex tag Id 構成がjQueryに相性が悪い

VF側のApex TagをHTML に変換される際、

Apex TagのIDが変わる

具体的な例で説明します

下記の <apex:outputPanel> は

HTML では "page:form:block:panel" という ID を持つ

タグとして展開される。

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

apex:outputPanel TagのIdが【panel】に設定しているが

実際htmlに変換されるとIDが【page:form:block:panel】になる

こうなると

$('#panel').on('click',function(){
     // 処理
});

が動作しない

理由：こんな【panel】ってIDがないぞ

$('#page:form:block:panel').on('click',function(){
     // 処理
});

も動作しない

理由： jqueryでは【　:　】はフィルタの意味を持つんですね。

解決方法

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>