问题
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.
回答1:
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.
来源:https://stackoverflow.com/questions/8718152/ajax-fallback-when-javascript-is-disabled