System.CalloutException: You have uncommitted work pending. Please commit or rollback before calling out

Question

Im getting CalloutException.You have uncommitted work pending.

Here's my VF Page.

<apex:commandbutton> SAVE </apex:commandbutton> 

<apex:pageBLock>
<apex:column>
  <apex:inputcheckbox />
<apex:column>
<apex:column>
  //Webserive is called here to display image. I pass the ID of this record and get image.
  <apex:image url="{!PhotoMap[item.id]}"></apex:image> 
<apex:column>
<apex:pageBLock>

I select one of the rows..then click Save. On clicking save, I save a child record for each of the selected rows. One of the columns is to display image which will call the imageService.

Scenario: On page load, the images are displayed correctly without any error. The service is called perfectly. Now, when I select one record, save it. The record is getting saved, but the image is gone. And if I refresh now the image is back.

The error says. You have uncommitted work pending. Please commit or rollback before calling out. How to handle this?

Please let me know. Thanks.

Answer 1

Changing the order in my code worked.