TabPanel changing styles to default on ajax submit.

[frosted]

Hi,
I am having a strange issue with rich:tabPanel. I have an application with a number of tabs, and the default switchType is being used (I believe it's server). I have a button which opens up a modal panel which asks the user to confirm their password before displaying a particular field on the page. The code to do this works fine, but after the button in the modal dialog is pressed, and the actionListener is executed, the entire page seems to be refreshed, and the styles for my tabs are reset to their default value, instead of the custom styles I am supposed to be using. Also, some values on the page backed by request scope beans are not appearing (because I am not re-initializing them in the actionListener, but I only want the actionListener to re-render one field on the page, not the entire page). If I change the switchType in the tabPanel to "ajax", as soon as I change tabs, the styles of the tabs change to their default value as well...

Here is the code:
Tab Panel:

<rich:tabPanel activeTabClass="tabStyle tabHeaderOn" inactiveTabClass="tabStyle tabHeaderOff" disabledTabClass="tabStyle
tabHeaderDisabled" binding="#{tabHeader.mainPanel}" id="tabHeader">
 <rich:tab ...
 </rich:tab>
</rich:tabPanel>

Modal Panel:

<rich:modalPanel id="confirmPasswordPanel" width="400" height="100" moveable="false" >
 <f:facet name="header">
 <h:outputText value="Confirm Password"/>
 </f:facet>
 <h:panelGrid width="100%" columns="1" columnClasses="smtxt2, alignCenter">
 <h:panelGroup>
 <h:panelGrid columns="2" width="100%" border="0" cellspacing="0" cellpadding="0" columnClasses="alignRight smtxt2, alignLeft">
 <h:outputText value="Please cofirm your password to view #{userProfile.firstName} #{userProfile.lastName}'s SSN" />
 <h:inputSecret value="#{userProfileHelper.passwordConfirmation}" immediate="true">
 <a4j:support ajaxSingle="true" event="onchange"/>
 </h:inputSecret>
 </h:panelGrid>
 </h:panelGroup>
 <h:panelGroup>
 <a4j:commandButton type="button" actionListener="#{userProfileHelper.confirmPassword}" value="Confirm"
reRender="ssnPanel2,ssnButton2,confirmPasswordPanel,tabHeader"
 immediate="true" id="confirmPasswordButton" styleClass="regbtn"/>
 <rich:spacer width="5" />
 <h:commandButton type="button" onclick="Richfaces.hideModalPanel('mainForm:confirmPasswordPanel');
return false" value="Cancel" styleClass="regbtn" />
 </h:panelGroup>
 </h:panelGrid>
 </rich:modalPanel>

The button to activate the modal password confirmation:

<a4j:commandButton type="button" actionListener="#{userProfileHelper.clickSSN}" styleClass="ssn_field" value="#{userProfileHelper.ssnButtonValue}"
reRender="ssnPanel,ssnButton" immediate="true" id="ssnButton"/>

And the actionListener:

public void confirmPassword( ActionEvent e ) {

 FacesContext context = FacesContext.getCurrentInstance();


 DomainUtil domainUtil = DomainUtil.getInstance();
 if( domainUtil.validatePassword( currentUser.getUserId(), getPasswordConfirmation() ) ) {
 // do stuff for success
 } else {
 // do stuff for failure

 }
 context.renderResponse();

 }

I guess my question is: How do I have the modal panel call my actionListener and not re-render the page? I have tried it with a renderResponse and without a renderResponse at the end of the method. And, why is my CSS being ignored upon the page being re-rendered?

Any help is much appreciated!

thank you.