Salesforce エラー「You have uncommitted work pending. Please commit or rollback before calling out」について

トランザクションを 2 つの別々の Ajax プロセスに分割します。

最初のプロセスはレコードを挿入し、2 番目のプロセスはコールアウトを実行して、新しく挿入されたレコードを更新できます。

Visualforce ページ: TestWsCallout

<apex:page controller="TestWsCallout" tabstyle="Account">
    <apex:form >
        <apex:actionFunction action="{!InsertRecord}" name="InsertRecord_JS" Rerender="statuses" status="Status1" oncomplete="CallWebService_JS();"/>
        <apex:actionFunction action="{!CallWebService}" name="CallWebService_JS" status="Status2" reRender="statuses, msg"/>
        <apex:outputPanel id="statuses">
            <apex:actionStatus id="Status1" startText="...Inserting Record Into DB..." />
            <apex:actionStatus id="Status2" startText="...Calling Web Service..." />
        </apex:outputPanel>
        <apex:outputPanel id="msg">
            <apex:pageMessages />
        </apex:outputPanel>
        <div><input name="DoAction" class="btn" type="button" value="Do Action" onclick="InsertRecord_JS();return false;"/></div>
    </apex:form>
</apex:page>

Apex コントローラー: TestWsCallout

public class TestWsCallout{
    
    Account myAccount;
   
    public PageReference InsertRecord() {
        myAccount = new Account(name = 'Test Account');
        insert myAccount;
        // この部分にコールアウト処理を入れると表題のエラーが出ます。
        return null;
    }
    
    public PageReference CallWebService() {
        
        // Web サービスのコールを実行
        HttpRequest req = new HttpRequest();
        req.setEndpoint('http://MyWebService12345678790.com?id=' + myAccount.Id);
        req.setMethod('GET');
        HttpResponse response = new Http().send(req);
        
        // レコードを更新
        myAccount.Name = 'Test Account 2';
        update myAccount;        
        ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.CONFIRM, 'WebService Called on New Account: ' + myAccount.Name));
        return null;
    }
}