Issue:
i) I am developing a JSF2 application and need to implement a tab control on a page. When a user clicks on a tab, the content for the panel below should be loaded from an xhtml file on the server using an ajax call.
ii) I want this functionality to gracefully degrade in case JavaScript is disabled. In such a scenario, clicking the tab should trigger an HTTP request and load a new page or show the content through progressive enhancement.
Potential Solutions:
i) One approach could be to use the code example provided by BalusC in How to ajax jsf 2 outputLink
:-
<h:form>
<f:ajax render=":include">
<h:commandLink value="Home" action="#{menuManager.setPage('home')}" /><br />
<h:commandLink value="FAQ" action="#{menuManager.setPage('faq')}" /><br />
<h:commandLink value="Contact" action="#{menuManager.setPage('contact')}" /><br />
</f:ajax>
</h:form>
<h:panelGroup id="include">
<ui:include src="#{menuManager.page}.xhtml" />
</h:panelGroup>
Inquiry
How can I enhance this solution to address problem (ii), or are there completely different methods that could be utilized? I have considered utilizing noscript as a possible solution, but I haven't been able to figure out how!
UPDATE: Proposed Solution - Pending Verification:
It seems that the provided code should work even if ajax is disabled, as it will fallback to regular HTTP requests as per :)
This approach seems elegant! I will test it out.