1

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.

Community
  • 1
  • 1
Nilesh
  • 1,222
  • 1
  • 11
  • 23
  • What? You have users who have Javascript disabled? I'd rather upgrade the users... – GeertPt Jan 03 '12 at 20:30
  • Are you sure you want to invest a lot of time and effort into handling users whose browsers have disabled javascript? According to [this Yahoo study](http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/), that's about 1%. I'm just sayin'. – DOK Jan 03 '12 at 20:31
  • 1
    I need to support a wide range of users, and ones on tiny screen devices (many of which lack js) too. I wouldn't bother to devote too much effort into this (redirecting to a different version of my application and such), and do as much as possible through code reuse. Hence my question. :) – Nilesh Jan 03 '12 at 20:35

1 Answers1

2

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.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555