JSF 语言切换器和 ajax 更新答案

【问题标题】：JSF Language switcher and ajax updateJSF 语言切换器和 ajax 更新
【发布时间】：2012-11-25 15:41:49
【问题描述】：

这个问题是老Language switcher implementation in JSF 2的后续问题。

问题的实质仍然有效，尽管 PrimeFaces 发布了一些更新的版本，而且我的 JSF 知识比以前好一点。

总而言之，我有一个完全 ajaxified 的 xhtml 页面。

语言切换器是这样的：

<h:form id="selectLanguage" >
    <p:commandLink action="#{languageSwitcher.setLanguage('it')}" rendered="#{languageSwitcher.language!='it'}" >
        <h:graphicImage library ="images" name="it.gif" title="it" />
    </p:commandLink>
    <p:commandLink action="#{languageSwitcher.setLanguage('en')}" rendered="#{languageSwitcher.language!='en'}" >
        <h:graphicImage library ="images" name="en.gif" title="en" />
    </p:commandLink>
</h:form>

我希望选择it时，仅显示en flag，并且Viceversa。我希望网页中的所有内容都使用资源包翻译进行更新。

特别是，我有一些p:dialogS 的标题属性也需要更新。对话框形式在每个对话框中：

<p:dialog header="#{msgs.myHeader}"  ... >
    <h:form .... />
</p:dialog >

页面的其余部分是一个<p:layout>，其中包含一些布局单元。每个layoutUnit 都包含一个表单以及其他需要翻译的组件。

LanguageSwitcher 是 SessionScoped JSF Managed Bean。

我已经尝试了以下所有方法：

<f:ajax render="@all" /> 在 p:commandLink 大括号内
update="@all" p:commandLink 内的属性
<p:ajax update="@all" /> 在 p:commandLink 大括号内

不幸的是，它们都不起作用。

我试过@all，虽然我可以插入表单的id，但它们并不多。问题是对话框标题没有以这种方式更新。

我正在使用 PrimeFaces 3.4.1 - Mojarra 2.1.13

【问题讨论】：

还没有阅读完整的问题，但是没有 ajax 的简单 <h:commandButton 怎么样？
您使用的是哪个浏览器？ PrimeFaces 的@all 在 IE 中无法对检索到的 JavaScript 进行后处理（修复计划在 3.4.2 中进行）。 <f:ajax> 在 <p:commandLink> 中根本不起作用，请改用 <h:commandLink>。
感谢两位宝贵的 cmets。 @Daniel：我确实需要 ajax。
@BalusC ：你说得对，PrimeFaces 的 ajax all 在 IE 中失败。不幸的是，问题似乎也存在于 3.4.2 中。我在使其工作 h:commandLink 时也遇到问题：它不会更新 p:dataTable 的标题。将进一步调查
哦，我没有注意到 3.4.2 已经出来了。实际上，该修复程序还没有在 3.4.2 中，相关的问题报告说它现在重新定位到 3.5。对不起，错误信息。但是，当您确认 IE 问题时，您是否暗示您的特定用例可以在其他浏览器中正常工作？只是为了在发布错误答案之前确定:)

标签： ajax jsf primefaces facelets

【解决方案1】：

目前已知所有 PrimeFaces 版本 (3.4.2) 中的 update="@all" 在 IE 中失败。与 ajax 响应一起交付的任何 JavaScript 代码都未正确初始化。

这在this PrimeFaces forum topic 中讨论并报告为issue 4731。

在他们修复它之前，最好的办法是通过在每个视图（可能）包含update="@all" 命令的每个视图上加载以下 JavaScript 片段来解决它：

var originalPrimeFacesAjaxResponseFunction = PrimeFaces.ajax.AjaxResponse;
PrimeFaces.ajax.AjaxResponse = function(responseXML) {
   var newViewRoot = $(responseXML.documentElement).find("update[id='javax.faces.ViewRoot']").text();

    if (newViewRoot) {
       $('head').html(newViewRoot.substring(newViewRoot.indexOf("<head>") + 6, newViewRoot.indexOf("</head>")));
       $('body').html(newViewRoot.substring(newViewRoot.indexOf("<body>") + 6, newViewRoot.indexOf("</body>")));
    } else {
        originalPrimeFacesAjaxResponseFunction.apply(this, arguments);
    }
};

以 JS 文件的形式提供此文件，该文件由 <h:outputScript target="head"> 在 <h:body> 内加载，以强制执行正确的加载顺序。

<h:body>
    <h:outputScript name="script.js" target="head" />
    ...
</h:body>

【讨论】：