apex:commandButton in visualforce component does not call controller method

Question

I have a commandButton in a visualforce component. The expected behavior is that the controller method would be called. The page is refreshed, but the method registered in the commandButton {!performUnlinkContact} is not called. The strange thing is that if I put the button on the base visualforce page, it calls the controller method as expected - but when in a component, it does not.

Here is my component:

<apex:component >
    <apex:attribute name="rk" description="RK Base Contact Data"  type="Object" required="true"/>

    <div class="unlinkBox">
        <div class="unlinkHeader">
            <div class="unlinkHeaderLeft">Wrong Contact?</div>
            <div class="unlinkHeaderRight"><a href=""  onclick="return hideUnlinkPanel()"><apex:image style="cursor: pointer;" value="{!$Resource.x}" alt="Close Panel" /></a></div>
        </div>
        <div class="unlinkBody">
            <div class="unlinkBodyLeft">
                Click Yes if the Contact displayed is incorrect.<br/><br/>You will be given the opportunity to link to a different Contact.
            </div>
            <div class="unlinkBodyRight">
                <apex:outputpanel id="callMethod">
                    <apex:commandbutton value="Yes, this is the wrong contact" action="{!performUnlinkContact}" rerender="" status="myDisplayStatus" />&nbsp;&nbsp;&nbsp;&nbsp;<a onclick="return hideUnlinkPanel()" style="color:blue;cursor:pointer;text-decoration:underline">No</a>
                </apex:outputpanel>
                <apex:actionStatus id="myDisplayStatus"  startText="(performing Contact Unlink...)"  stopText=""/>
            </div>
        </div>
    </div>
</apex:component>

and here is the method in the controller extension:

public PageReference performUnlinkContact() {
     System.debug('==================================!!performUnlink');
    if (this.thisLead.rkContactId__c != 0) {
        this.thisLead.rkContactId__c = 0;

        update this.thisLead;
    }

    return null;
}

I'm sure I must be doing something wrong since I am new to salesforce and still learning, but I am unable to find any related issues when I search on how to resolve this issue. Thanks in advance for the help.

Solution 1

Thanks for the replies - to resolve I ended up adding an actionFunction to the base Page, then just calling this function in the component via a button's onclick event:

Code in base page:

    <apex:actionFunction name="doUnlink" action="{!performUnlinkContact}" rerender="refresh" status="myStatus"/>

Code to call function in the component:

    <input type="button" value="Yes, this is the wrong contact" onclick="doUnlink();" />

This method seems to work well so far.

Solution 2

You can also pass a reference of performUnlinkContact() to the component, using an apex:attribute of type ApexPages.Action, and then when your commandButton uses this reference, it will call the method defined in the page controller.

<apex:component>
    <apex:attribute name="performUnlinkContact" type="ApexPages.Action" description="Passing method from controller"/>
    <!-- your stuff here -->
</apex:component>

Then when you use your component, you have to populate that attribute like so:

<c:MyComponent performUnlinkContact="{!performUnlinkContact}"