问题描述
问题:
i)在JSF2应用程序中,我想创建一个带有选项卡控件的页面,当用户单击选项卡时,其中的内容为下面的面板是通过ajax调用从服务器中的xhtml文件加载的。
ii)我希望这支持优雅降级(当Javascript被禁用时),以便在单击选项卡时,HTTP请求被触发,并加载新页面......或者相反,通过渐进式增强。
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.
部分解决方案:
i)我想我可以通过BalusC在
: -
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>
问题
我该如何扩展这个解决问题(ii)还是有其他完全不同的方法吗?我想也许我可以通过noscript实现这一点,但无法弄清楚如何!
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!
编辑:可能的解决方案 - 但验证:
即使禁用了ajax,上述代码仍然有效;它应该只通过HTTP工作,根据 :)¥b $ b优雅!我会尝试一下。
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.
推荐答案
如果您使用< h:commandButton>
而不是< h:commandLink>
,那么当JS被禁用时它会正常工作。无论如何,命令链接需要JS以提交隐藏的POST表单,ajaxified或notjaxified。你可以在必要时使用一些CSS来使命令按钮看起来像链接(例如删除边框,背景,插图等)。
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).
作为一个完全不同的选择,无论如何,使用< h:outputLink>
或< h:link>
将页面设为GET请求请求参数或pathinfo并使用 jQuery.load()
而不是不引人注意地获取包含页面,提取相关部分并包含在HTML DOM树中。
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.
这篇关于当Javascript被禁用时,Ajax回退的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!