Problem:
i) In a JSF2 application, I want to create a page with a tab control, where, when the user clicks on a tab, the contents for the panel below is loaded from an xhtml file in the server through an ajax call.
ii) I want this to support graceful degradation (when Javascript is disabled), so that upon clicking the tab, an HTTP request is fired, and a new page is loaded...or the other way round, through progressive enhancement.
Partial solutions:
i) I guess I can accomplish this through the code example posted 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>
Question
How can I extend this to solve problem (ii) Or is there any other completely different method? I think maybe I could achieve this with a noscript, but can't figure out how!
EDIT: Possible solution - yet to verify:
The above code should work even if ajax is disabled; it should just work through HTTP, according to http://www.laliluna.de/articles/posts/jsf-2-evaluation-test.html :)
Elegant! I'll try it out.