How to call controller method inside the tab panel in visualforce page?

Question

How to call controller method inside the tab panel in visualforce page? I am trying to call my controller methods like shown below but this dosen't work.

Below are the codes from my VF page and controller. I want to navigate to the 'page1' vf page(mentioned in tab label 'Campaign Feedback') through the method 'campaignpage' which i have written in my controller. All other pages which are mentioned onTabEnter are working fine. I did not go for onTabEnter for campaign also since current page(Event) Id needs to be passed to my campaign page and my controller method does that.

Any suggestions would be a Great help! Thanks in advance.

<apex:page standardController="Event" extensions="eventControllerExtension" id="thisPage">
    <script type="text/javascript">
        function func()
        {
            CallApexMethod();
        }
    </script>
    <apex:pagemessages />
    <apex:sectionHeader title="Event" subtitle="{!Event.Subject}"/>
    <apex:form >

    <apex:tabPanel switchType="ajax" id="tabVerify1" selectedTab="c">
    <apex:actionFunction name="CallApexMethod" action="{!campaignpage}" />
            <apex:tab label="Event" name="name1"> You are in Event Page! </apex:tab>
            <apex:tab label="Campaign Feedback" rendered="{!readonly}" onclick="func()" id="tabDetails" >
             </apex:tab>
            <apex:tab label="Chargeable Single Order" onTabEnter="window.parent.location.replace('/apex/page2');" > </apex:tab>
            <apex:tab label="Giveaway Order" onTabEnter="window.parent.location.replace('/apeX/page3');" > </apex:tab>
    </apex:tabPanel>
</apex:page>

My Controller

public PageReference campaignpage()
{
    Event eve =(Event)stdCtrl.getRecord();
    upsert eve;
    pageReference saveAndRedirectPage = page.page1;
    saveAndRedirectPage.setRedirect(true);
    saveAndRedirectPage.getParameters().put('id', eve.id);
    return saveAndRedirectPage;
}

Answer 1

There's a bug in apex:actionFunction which prevents the action from firing properly unless you include a rerender attribute. Try giving it a rerender="none"(or some valid component), and move it up one level (inside the form, outside the tabPanel). Also, your Javascript func() isn't needed, as you can just call onclick="CallApexMethod();"

<apex:sectionHeader title="Event" subtitle="{!Event.Subject}"/>
<apex:form >
    <apex:pagemessages id="errors" />

    <apex:actionFunction name="CallApexMethod" action="{!campaignpage}" rerender="errors" />
    <apex:tabPanel switchType="ajax" id="tabVerify1" selectedTab="c">
        <apex:tab label="Event" name="name1"> You are in Event Page! </apex:tab>
        <apex:tab label="Campaign Feedback" rendered="{!readonly}" onclick="CallApexMethod()" id="tabDetails" >
         </apex:tab>
        <apex:tab label="Chargeable Single Order" onTabEnter="window.parent.location.replace('/apex/page2');" > </apex:tab>
        <apex:tab label="Giveaway Order" onTabEnter="window.parent.location.replace('/apeX/page3');" > </apex:tab>
    </apex:tabPanel>
</apex:form>