How to pass tab names to controller

Question

I have a VF page with 5 tabs. I have Next button on all tabs to re-direct to the new page. I would like to have each next button perform insert/updating records along with re-direct. So how do I pass each tab information to the controller, so that the re-direct would happen?

Answer 1

You could create a variable and add it to the Parameters in the URL for your redirect - and in your page you can select the tab by setting the value to this paramter:

// for tab 1 
aria-selected="{!$CurrentPage.parameters.selectedTab == 'tab1' ]}"

In your page add this:

<li class="slds-tabs--scoped {!IF( $CurrentPage.parameters.selectedTab == 'tab1', 'slds-active', '' )}" id="tab1" role="presentation">
    <a href="javascript:void(0)" onclick="setSelectedTab( 'tab1' )" role="tab" aria-selected="{!$CurrentPage.parameters.selectedTab == 'tab1'}" class="slds-tab--scoped__link">Tab 1</a>
</li>
<li class="slds-tabs--scoped {!IF( $CurrentPage.parameters.selectedTab == 'tab1', 'slds-active', '' )}" id="tab1" role="presentation">
    <a href="javascript:void(0)" onclick="setSelectedTab( 'tab1' )" role="tab" aria-selected="{!$CurrentPage.parameters.selectedTab == 'tab2'}" class="slds-tab--scoped__link">Tab 2</a>
</li>

...

In your controller:

String selectedTab { get; set; }

public PageReference changeTab(){

    ... do your DML work here ... 

    PageReference pg = Page.CurrentPage;

    pg.getParameters().put( "selectedTab", selectedTab );

    pg.setRedirect( true );

    return pg;
}

OR you can do this in javascript:

<script>
    var j$ = jQuery.noConflict();

    // get the tab value from the URL 
    var urlParameter = function getURLParam( param ){
        var pageUrl = decodeURIComponent( window.location.search.substring( 1 )),
                urlVars = pageUrl.split( "&" ),
                parmName;

        for( var i = 0; i < urlVars.length; i++ ){

            parmName = urlVars[ i ].split( '=' );

            if( parmName[ 0 ] === param ){
                return ( parmName[ 1 ] === undefined ? "tab1" : parmName[ 1 ] );    // default return first tab - otherwise selected tab
            }
        }

    };

    j#( window ).on( "load", function(){
        getSelectedTab();
    }

    // get the selected tab and set the others unselected 
    function getSelectedTab(){
        var tab = urlParameter( "selectedTab" );

        j$( "#" + tab ).attr( "aria-selected", true );
        j$( "#" + tab ).parent( "li" ).siblings().children( "a" ).attr( "tabindex", -1 );

        j$( "#" + tab ).parent( "li" ).addClass( "slds-active" );

        j$( "[ class^='slds-tab' ]" ).each( function( index ){
            if( j$( this ).id !== tab ){
                // remove the selected
                j$( this ).children( "a" ).attr( "aria-selected", false );
                j$( this ).removeClass( "slds-active" );

                // hide the other tab panel
                j$( this ).children( "div[role='tabpanel'].slds-show" ).removeClass( "slds-show" );
                j$( this ).children( "div[role='tabpanel'].slds-show" ).addClass( "slds-hide" );
            }
        });
    }


</script>