How can I submit a Detail-tag based page?

Question

I have a very simple VF page that displays the Detail-tag Opportunity page. Within it, I have a Custom Button that calls the finish() JS method. From there, I would like to submit the Opportunity within the Details-tag to the finish() method in my Controller. Is there a way to do this?

VF Page:

<apex:page standardController="Opportunity" extensions="OpportunityViewPageController">
<script>
    function finish(){
        //Submit to finish() method in extension class. How?
    }
</script>

<apex:detail subject="{!Opportunity}" relatedList="true" title="true" showChatter="true"
   inlineEdit="true" relatedListHover="true"/> 
</apex:page>

Apex Controller:

public class OpportunityViewPageController{

...

public PageReference finish(){
    this.op.StageName = 'Closed Won';
    upsert this.op;

    return null;
}
}

Answer 1

If you don't need to do anything in your javascript function except call the controller method, you can remove the JS entirely and just add an apex:commandbutton to your page. Commandbuttons need to be inside an apex:form. Here's a minimal example, you can add additional tags to add more layout, such as apex:pageblock and apex:pageblockbuttons as desired:

<apex:page standardController="Opportunity" extensions="OpportunityViewPageController">
  <apex:form>
    <apex:commandButton action="{!finish}" value="finish" />
    <apex:detail subject="{!Opportunity}" relatedList="true" title="true" showChatter="true" inlineEdit="true" relatedListHover="true"/> 
  </apex:form>
</apex:page>

The action param uses merge field syntax to specify a method on the controller (which must return a PageReference); the value param specifies the text to appear on the button.

If you must have javascript, you can use apex:actionfunction to create a JS alias for your controller method. Like a commandbutton, it must occur inside an apex:form.

<apex:page standardController="Opportunity" extensions="OpportunityViewPageController">
  <apex:form>
    <apex:actionfunction action="{!finish}" name="finishJS" />
    <!-- you'll need to add the JS to call finishJS() -->
    <apex:detail subject="{!Opportunity}" relatedList="true" title="true" showChatter="true" inlineEdit="true" relatedListHover="true"/> 
  </apex:form>
</apex:page>

The action param is the same as on the command button; the name param is the name of the javascript function to create. You can use any name you like; I prefer to use the name of the controller method with "JS" appended.