Use cancelable ontableave event attribute:
<rich:tabPanel> <rich:tab label="Tab 1" ontableave="return confirm('Go to the next tab?');"> Tab1 </rich:tab> <rich:tab label="Tab 2"> Tab2 </rich:tab> </rich:tabPanel>
You can save form value by using a4j:jsFunction component:
<rich:tabPanel switchType="ajax" eventsQueue="tabQueue"> <rich:tab label="Tab 1" ontableave="saveData()"> Tab1 <h:inputText value="" /> <a4j:jsFunction name="saveData" eventsQueue="tabQueue" /> </rich:tab> <rich:tab label="Tab 2"> Tab2 </rich:tab> </rich:tabPanel>
Furthermore, tab values are automatically processed on server if tab switching occurs.
i have some concerns here.
i am using 3.2.2 GA. in that i think eventQueue attribute is not there.
when i leave tab, if user changes something in that tab i need to alert user about unsaved data on that tab. if says ok then i need to save that tab data first then i need to load tab data which he clicked. if he say cancel simply i need to load next tab data which clicked.
before alert user, how can i know user chages something inside that tab. can you please clarify my doubts.
eventsQueue attribute existed long before 3.3.0.GA, so you can use it in 3.2.2.GA.
So I've added an example of code on how to program tab panel component in order to implement your use case. You have to write some JS code in order to know whether changes were made by the user or not.
1) eventQueue present in 3.2.2. a4j:queue tag was designed only for 3.3.0 but queue attribute was always there ;)
2) You could define the forms not around the tabPanel but inside every tab. Or leave the form around componet but make the tabs ajaxSingle. In this case tabs children values will not be updated automatically. And you will be responsible to store the values like Nick adviced.
3) You could check the changes via some JS. just define some boolean client side variable which will becomes true after any input change.