Visualforce非同期更新処理とlayout="none"

本文はVisualforce非同期にactionメソッドの結果がクライアントに返されるときに指定される部分が更新されないことを説明する。

Visualforce非同期処理

Visualforceに<apex:actionFunction>などの非同期処理タグに属性reRenderがあって、
actionメソッドの結果がクライアントに返されるときに更新される部分のIDです。
通常は更新したい部分について、<apex:outputPanel>タグを利用することです。

実装例は以下の通りです。ボタンをクリックしたら、testIdのエリアが非同期に更新される。

非同期検証.v

<apex:outputPanel id="testId">
　　<apex:inputText value="{!testInput}" /><br/>
   <apex:outputText value="{!testOutput}" /><br/>
</apex:outputPanel>
<input type="button" value="非同期送信" onclick="testAf()" />
<apex:actionFunction name="testAf" action="{!testAf}" reRender="testId" />

<apex:outputPanel>のlayout属性

layout属性に使用できる値は以下の３つです。
・block　　⇨　HTML div タグを生成
・inline　　⇨　HTML span タグを生成（デフォルト）
・none　　⇨　HTML タグを生成しない

なぜ「layout="none"」を設定する必要か

既存システムや静的HTMLが既に提供されている場合など、特定なエリアが<apex:outputPanel>タグで指定する。
例えば、非同期処理の結果がクライアントに返されるときに指定される更新部分を指定する。
<apex:outputPanel>タグはSPANがデフォルト生成されるので、特定なエリアが<apex:outputPanel>タグで指定することにより、画面レイアウトが崩れる場合があるから。つまり、<apex:outputPanel>タグにより、既存の画面レイアウトに影響がある場合に「layout="none"」を指定する。

「layout="none"」を設定したら、非同期処理に何の影響か。

では、<apex:actionFunction>の属性reRenderに指定される部分に「layout="none"」を設定したら、動作はどうなるかな。
結論から言うと、actionメソッドの結果がクライアントに返されるときに指定される部分が更新されないこと。
原因も簡単です。「layout="none"」は何も生成されないため、非同期処理が指定されるIDはそもそもHTMLに解析されなくて存在しない。

まとめ

・<apex:actionFunction>の属性reRenderに指定されるIDは<apex:outputPanel>タグなら、「layout="none"」を設定しない。
・<apex:outputPanel>タグのせいで画面レイアウト崩れがある場合、更新したいエリアのDIVタグ、もしくはSPANタグを<apex:outputPanel>タグに切替えること。