Salesforce apex:actionFuntionnの注意事項

8261 ワード
myproject Salesforce Visualforce Apex name属性 Salesforce テキストリンク

<apex:actionFunction>タグについて、SalesforceのVisualforceページの非同期処理時利用されるタグです。
reRender属性で指定されたID領域は非同期の部分更新エリアです。
部分更新エリアに<apex:inputText>タグがある場合、そのタグにhtml-name属性を定義する場合、サーバ側との通信がおかしくなる。

・まず、name属性なしの場合の動きとコードは以下となります。簡単なサンプルコードです。

　※ここで注意して欲しいのは<apex:inputText>タグにhtml-name属性が定義されてない。

testActionFunction.v
<apex:page controller="TestApex">
    <apex:form >
        <apex:outputPanel id="reRenderArea">
            入力項目：<apex:inputText value="{!testInput}" html-placeholder="入力してください" /><br/>
            出力項目：<apex:outputText value="{!testOutput}" /><br/>
            <a onclick="test()">サーバ側へ送信</a>
            <apex:actionFunction action="{!testActionFunction}" name="test" reRender="reRenderArea"/>
        </apex:outputPanel>
    </apex:form>
</apex:page>
TestApex.cls
public class TestApex {
    public String testInput{get;set;}
    public String testOutput{get;set;}
    public void testActionFunction() {
        testOutput = 'Your Input is : ' + testInput;
    }
}

画面の動きは以下となります。サーバとの通信は何回でも正常です。
初期表示　　　　　⇨　
１回目入力する　　⇨　
送信ボタン押下後　⇨　
２回目入力する　　⇨　
送信ボタン押下後　⇨　

・次は、html-name属性がある場合、動きはどうなるでしょうか一緒に見てみましょう。

　※１回目のサーバとの通信は変わらないが、２回目のサーバ通信を注目してください。
　testActionFunction.vfのページコードにある<apex:inputText>タグが以下コードで置換する。

testActionFunction.v
入力項目：<apex:inputText value="{!testInput}" html-name="testName" html-placeholder="入力してください" />

画面の動きは以下となります。
初期表示　　　　　⇨　
１回目入力する　　⇨　
送信ボタン押下後　⇨　
２回目入力する　　⇨　
送信ボタン押下後　⇨　

・事象：

１回目「1111」を入力し、サーバ側へ送信リンクを押下して、画面上入力された情報とサーバから送信された情報が正しく表示されるが、その後、入力項目に「2222」を変更し、サーバ側へ送信リンクを再度押下して、入力項目に「2222」が保持されないし、サーバから送信された情報も正しく表示されない。
２回目以降の内容は常に１回目の情報が保持されてしまう。何故なんでしょうかね。
原因はわからないが、今後<apex:inputText>タグを利用する時、更新エリアにhtml-name属性が利用しないように注意するしかないですね。
もし理由がわかる方がいれば、是非ご教示して頂きたいです。