0

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?

0

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>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.