【Salesforce】VisualforceでAjaxStatusを使用する
Visualforceの開発でたまにあるのですが、ボタンを複数回クリックすると当然のことながらリクエストも複数飛んでしまいます。
actionFunctionが呼ばれたタイミングで、actionStatusにて画面を覆ってしまうとそういうこともなくなります。
https://developer.salesforce.com/docs/atlas.ja-jp.pages.meta/pages/pages_compref_actionStatus.htm
自分がコピペする用にメモです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!-- 処理中メッセージ --> <apex:actionStatus id="AjaxStatus"> <apex:facet name="start"> <div style="display: block; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 1000;" > <div style="display: inline-block; position: fixed; top: 45%; left: 45%;" > <span style="font-size: 2.0rem; font-weight: bold; color: white;" >処理中．．．</span> </div> </div> </apex:facet> </apex:actionStatus> <!-- statusにAjaxStatusを設定 --> <actionFunction name="func" action="{!func}" status="AjaxStatus" rerender="Form" oncomplete="afterFunc();" /> <!-- 処理中メッセージ --> |
JavaScriptでactionfunctionで指定されているfuncを呼び出すと、HTTPの通信が始まります。
通信中に、AjaxStatusで指定したactionStatusが有効になり、画面を覆う処理中を表すメッセージが表示されます。
くるくるのgifやcssを表示すると分かりやすいですね。
通信が終わると、メッセージは非表示になります。
今回は指定していませんが、name=stopのfacetタグを作成すると、通信していない時の表示が作成できます。
No comments.