🐴

Apex,Salesforce:apex:commandButtonの後にJavascriptを実行したい

3 min read

概要

ボタン押した後にJSを使って色々やりたい。
ページリロードさせたいとか、そんなときに役立つ。

解説

解説と言ってもひとことで終わるんだけど…w
<apex:commandButton action="{!save}" Value="保存" oncomplete="pageReload();"/>
oncomplete を設定すればJSのFunctionが呼べる。

サンプルのソースは以下の流れ。

  1. 保存ボタンをクリックしたらApexの PageReference save を呼び出してレコードを保存する
  2. Visualforceページに記載したJS pageReload()を呼ぶ。
  3. pageReload()がページをリロードする

ソースコード:Apex

public class CustomControllerTest {
	public Id accountId;	//親取引先のID
    public List<Contact>  con {get;set;}	//対象の取引先責任者リスト
    public Account account {get;set;}
    //コンストラクタ
    public CustomControllerTest(ApexPages.StandardSetController controller) {
		accountId = ApexPages.currentPage().getParameters().get('id');
		con = [Select id, Name,firstName,LastName  from Contact where accountId = :accountId ];
        account = [Select id , Name from Account where id = :accountId Limit 1];
    }
//保存処理
public PageReference save() {
	upsert account;
    upsert con;
	String prevURL = '/' + accountId;
	PageReference pageRef = new PageReference(prevURL);
	return null;
}

    public PageReference fullsave() {
String parameter = System.currentPageReference().getParameters().get('parameter');
        upsert account;
    upsert con;
	String prevURL = '/' + accountId;
	PageReference pageRef = new PageReference(prevURL);
	return null;
}
}

ソースコード:Visualforce

<apex:page standardController="Account" recordSetVar="Lists" extensions="CustomControllerTest">
  <apex:form >
    <apex:pageBlock title="取引先編集画面">
      <table>
        <thead>
          <th>id</th>
          <th>Name</th>
        </thead>
        <apex:repeat value="{!account}" var="hoge">
          <tr>
            <td>
              <apex:inputField value="{!hoge.Id}" /> </td>
            <td>
              <apex:inputField value="{!hoge.Name}" /> </td>
          </tr>
        </apex:repeat>
      </table>
      <apex:commandButton action="{!save}" Value="保存" oncomplete="pageReload();"/>
      <apex:commandButton action="{!cancel}" Value="キャンセル" /> </apex:pageBlock>
    <apex:pageBlock title="取引先責任者編集画面">
      <table>
        <thead>
          <th>id</th>
          <th>FirstName</th>
          <th>LastName</th>
        </thead>
        <apex:repeat value="{!con}" var="fuga">
          <tr>
            <td>
              <apex:inputField value="{!fuga.Id}" /> </td>
            <td>
              <apex:inputField value="{!fuga.FirstName}" /> </td>
            <td>
              <apex:inputField value="{!fuga.LastName}" /> </td>
          </tr>
        </apex:repeat>
      </table>
      <apex:commandButton action="{!save}" Value="保存" />
      <apex:commandButton action="{!cancel}" Value="キャンセル" /> </apex:pageBlock>
  </apex:form>
    <script>
                    function pageReload(){
                location.reload();
                }
    </script>
</apex:page>

Discussion

ログインするとコメントできます