Android: Unable to replace fragment in viewpager

Question

Hi i am trying this for 2 week and still not able to replace a fragment with another in viewpager. I have three fragments as tabs in viewpager ,when i click a button in the first fragment , i want to replace the firstfragment with fourthfragment. Iam doing a below but it is not working

 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 different ways but i am not able to make it work.Any working example or a solution to this will be very helpful.Any help is very much appreciated