I have a in my ui file which has switchType set to ajax. It has 4 tabs. The problem is when I click on tab1 , it loads data of tab1. But, when I click on tab2, it loads data of tab1 and tab2. When tab3 is clicked, it loads data of tab1, tab2 and tab3. And so on. How can I avoid this behaviour? It should load the data of only the tab which is selected(or clicked on) and not all the tabs before it.
I use richfaces 4 and JSF 2.0
Below is the code :
<rich:tabPanel status="loadingMask" id="tabPanelTest" switchType="ajax" style="height:80%;width:100%;padding-top:5px">
<a4j:ajax event="itemchange" render="tabPanelTest" />
<rich:tab header="Tab 1" id="TAB 1">
<h:panelGroup layout="block" style="height:100%;width:100%;" id="tab1view">
<ui:include src="tab-1-file.xhtml"/>
</h:panelGroup>
</rich:tab>
<rich:tab header="Tab 2" id="TAB 2">
<h:panelGroup layout="block" style="height:100%;width:100%;" id="tab2view">
<ui:include src="components/tab-2-file.xhtml"/>
</h:panelGroup>
</rich:tab>
<rich:tab header="Tab 3" id="TAB 3">
<h:panelGroup layout="block" style="height:100%;width:100%;" id="tab3view">
<ui:include src="tab-3-file.xhtml"/>
</h:panelGroup>
</rich:tab>
<rich:tab header="Tab 4" id="TAB 4">
<h:panelGroup layout="block" style="height:100%;width:100%;" id="tab4view">
<ui:include src="tab-4-file.xhtml"/>
</h:panelGroup>
</rich:tab>
</rich:tabPanel>