Question

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.

Was it helpful?

Solution

If you use <h:commandButton> instead of <h:commandLink>, then it will work just fine when JS is disabled. The command links require JS anyway in order to submit a "hidden" POST form, ajaxified or not. You could if necessary throw in some CSS to make the command buttons to look like links (e.g. remove border, background, inset, etc).

As a completely different alternative, make them GET requests anyway by using <h:outputLink> or <h:link> with the page as a request parameter or pathinfo and use jQuery.load() instead to unobtrusively obtain the include page, extract the relevant portion and include in the HTML DOM tree.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top