Visualforceでjqueryの使用

Salesforceに以下のような押すと日付が変わるボタンを実装したので書いておきます。

目標

• Salesforceにて、「前日へ」ボタンを押すとtable内にあるapex:inputFieldフォームの日付が前日になる仕組みを作りたい。（ほかのボタンも同様）
• その際にjQueryを使用する。

やったこと

1. ボタンを押した時に反応してほしい

• いきなり実装することは難しかったため、まずはボタンクリック時にconsole.log()でコメントを出力できるようにしました。
• 最初に書いたコードは以下の通りです。

<apex:form id="form1">
    <apex:commandButton value="hoge" id="btn1"/>
    ～省略～
    <script>
        $("#btn1").on("click", function(){
            console.log("ボタンが押されました");
        }
    </script>
</apex:form>

idを指定したはずなのにボタンが反応しない…

原因：

• Visualforce特有のコンポーネント（<apex:なんとか>みたいなやつ）のidをjQueryコードのトリガーに使用したい場合はフルパスで指定する必要がある

解決方法：

• 仕方ないからidをフルパスで記述しようとするも、Visualforce上で指定されたidをhtml化すると、コロン:が含まれている

• jQueryのセレクタで、コロンはフィルタという特別な役割を持つため、\\をコロンの前につけてエスケープしなくてはならない

• idが長くなってしまうため、$("[id$=btn1]")と記述することで、id名の末尾にbtn1がある要素を取得する

• 書き直したコードは次の通り。これでクリック時にログが表示されるようになった。

<apex:form id="form1">
    <apex:commandButton value="hoge" id="btn1"/>
    ～省略～
    <script>
        $("[id$=btn1]").on("click", function(){
            console.log("ボタンが押されました");
        }
    </script>
</apex:form>

2. テーブルの値を取得

• まず、今回使用するテーブルのコードは以下の通り（※不要な部分は省略しました）。

<apex:pageBlock id="pb">
    <apex:PageBlockTable id="pbt" value="hoge" var="h">
        <apex:column value="{!h.hoge1}"/>
        ～省略～
        <apex:column headerValue="稼働日">
            <apex:inputField id="workingday" value="{!h.hogex}"/>
        </apex:column>
    </apex:PageBlockTable>
</apex:pageBlock>

• このコードで、id="workingday"の部分の値を取得したい。画像だと以下の赤丸部分。
  

3. 日付の計算

• ボタンを押すと一日前の日付が表示されてほしい → Date() オブジェクトの使用

4. ボタンを押した時にフォーム内の日付が一日前になってほしい

• 最初に書いたボタン実装部分のコードは次の通り。

<apex:commandButton value="前日へ" id="btn1"/>

ボタンを押すと一瞬前の日付が表示されるが、クリックのたびにリロードされて初期画面が表示されてしまう…

原因：

• apex:commandButton タグの type 属性が原因。
• オプションを指定しない場合、上記のコードはhtml上で type="submit" と表示される。
• この submit という属性によってフォームが送信され、ページがリロードされてしまう。

解決方法：

• コードをHTMLで出力した際に、type="button" と表示されればよい。
  • button 属性には送信機能が付いていないため、ただのボタンとして実装できる。
• 以下のようにコードを書き換えた。

<apex:commandButton value="前日へ" id="btn1" rerender="form"/>

以上より、HTMLではtype="button"と表示されるようになり、ボタンクリックの際に画面全体がリロードされなくなった。