Ajax fallback when Javascript is disabled

浪子不回头ぞ 提交于 2019-12-08 09:03:31

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!