Visualforce 開発者ガイド
jコマンドリンクとボタンによる部分ページ更新の実装
最も広く使用されている Ajax 動作の 1 つに部分ページ更新があります。ページ全体を再読み込みするのではなく、ユーザの何らかのアクションに従って特定の部分のページのみを更新する動作です。
部分ページ更新を実装する最も単純な方法は、更新する必要のあるコンポーネントを識別するために、<apex:commandLink> または <apex:commandButton> タグで reRender 属性を使用する方法です。ユーザがボタンまたはリンクをクリックすると、識別されたコンポーネントとそのすべての子コンポーネントのみが更新されます。
たとえば、「単一ページでのクエリ文字列パラメータの取得と設定」で説明されている取引先責任者リストの例を考えてください。この例では、ユーザがリストの取引先責任者の名前をクリックしてその詳細を表示すると、このアクションの結果としてページ全体が更新されます。そのマークアップに 2 つの変更を適用することによって、リストの下の領域のみが更新されるようにページの動作を変更できます。
- まず、再表示するページの部分を作成または特定します。これを行うには、<apex:detail> タグを <apex:outputPanel> タグでラップし、出力パネルに id パラメータを指定します。id の値は、この領域を参照する名前で、ページのあらゆる場所で使用できます。この値は、ページ内で一意である必要があります。
- 次に、定義した領域の部分ページ更新を実行するために使用する、呼び出しポイント (コマンドリンク) を示します。これを行うには、<apex:commandLink> タグに reRender 属性を追加し、出力パネルの id に割り当てられた値と同じ値をその属性に指定します。
最終的なマークアップは次のようになります。
1<apex:page standardController="Account">
2 <apex:pageBlock title="Hello {!$User.FirstName}!">
3 You are displaying contacts from the {!account.name} account.
4 Click a contact's name to view his or her details.
5 </apex:pageBlock>
6 <apex:pageBlock title="Contacts">
7 <apex:form>
8 <apex:dataTable value="{!account.Contacts}" var="contact" cellPadding="4"
9 border="1">
10 <apex:column>
11 <apex:commandLink rerender="detail">
12 {!contact.Name}
13 <apex:param name="cid" value="{!contact.id}"/>
14 </apex:commandLink>
15 </apex:column>
16 </apex:dataTable>
17 </apex:form>
18 </apex:pageBlock>
19 <apex:outputPanel id="detail">
20 <apex:detail subject="{!$CurrentPage.parameters.cid}" relatedList="false"
21 title="false"/>
22 </apex:outputPanel>
23</apex:page>ページを保存したら、任意の取引先責任者をクリックし、ページ全体を更新しなくても詳細コンポーネントが表示されることを確認します。