Android: cannot replace fragment in viewpager

Hi, I have been trying this for 2 weeks and still cannot replace the fragment with another in the viewpager. I have three tabbed snippets in the viewpager, when I click the button in the first snippet, I want to replace the first snippet with the fourth snippet. I do below, but it does not work.

 productDetailFragment = new PlaceSearchFragment();            
    FragmentTransaction transaction = getFragmentManager().beginTransaction();
    transaction.addToBackStack("fh");
    transaction.replace(R.id.maincontainer,productDetailFragment,"yourfragment").commit();

Below is my MainActivity with viewpager

public class MainActivity extends FragmentActivity implements
        ActionBar.TabListener {

    private ViewPager viewPager;
    private TabsPagerAdapter mAdapter;
    private ActionBar actionBar;
    // Tab titles
    private String[] tabs = { "New", "Recent", "All" };


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Initilization
        viewPager = (ViewPager) findViewById(R.id.pager);
        actionBar = getActionBar();
        mAdapter = new TabsPagerAdapter(getSupportFragmentManager());

        viewPager.setAdapter(mAdapter);


        // Adding Tabs
        for (String tab_name : tabs) {

            actionBar.addTab(actionBar.newTab().setText(tab_name)
                    .setTabListener(this));

        }


        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                // on changing the page
                // make respected tab selected
                actionBar.setSelectedNavigationItem(position);
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
            }
        });
    }

    @Override
    public void onTabReselected(Tab tab, FragmentTransaction ft) {
    }

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        // on tab selected
        // show respected fragment view
        viewPager.setCurrentItem(tab.getPosition());

    }

    @Override
    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
    }
}}

Below is my fragmentpageadapter

public class TabsPagerAdapter extends FragmentPagerAdapter {

    public TabsPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int index) {

        switch (index) {
        case 0:
            // Top Rated fragment activity
            return new GetRideFragment();
        case 1:
            // Games fragment activity
            return new PostRideFragment();
        case 2:
            // Movies fragment activity
            return new SearchRidesFragment();
        }

        return null;
    }

    @Override
    public int getCount() {
        // get item count - equal to number of tabs
        return 3;
    }

}

searched alot and tried differently, but I can't get it to work. Any working example or solution for this would be very helpful. Any help is much appreciated