Primefaces Mobile ajax selectOneMenu 更新失败

Question

我想使用 Primefaces 5.2 创建一个移动表单，其中一个 selectOneMenu 结果通过 Ajax 更新第二个 selectOneMenu，就像这里的展示示例：http://www.primefaces.org/showcase/ui/ajax/dropdown.xhtml但随后是移动版本。

我的问题与这个非常相似：Primefaces Mobile's Ajax does not update a <p:selectOneMenu> 但没有答案。

我已经创建了一个 JSF 页面和 backingbean 完全就像展示示例一样，并且它有效。

然而，当我使用 <f:view renderKitId="PRIMEFACES_MOBILE" /> 添加移动方面时，第二个 selectOneMenu 在更新后呈现为普通，并显示一个永久微调器。

...
<f:view renderKitId="PRIMEFACES_MOBILE" />
...
<h:body>
<h:form>
    <p:growl id="msgs" showDetail="true" />

    <p:panel header="Select a Location" style="margin-bottom:10px;">
        <h:panelGrid columns="2" cellpadding="5">
            <p:outputLabel for="country" value="Country: " />
            <p:selectOneMenu id="country" value="#{dropdownView.country}" style="width:150px">
                <p:ajax listener="#{dropdownView.onCountryChange}" update="city" />
                <f:selectItem itemLabel="Select Country" itemValue="" noSelectionOption="true" />
                <f:selectItems value="#{dropdownView.countries}" />
            </p:selectOneMenu>

            <p:outputLabel for="city" value="City: " />
            <p:selectOneMenu id="city" value="#{dropdownView.city}" style="width:150px">
                <f:selectItem itemLabel="Select City" itemValue="" noSelectionOption="true" />
                <f:selectItems value="#{dropdownView.cities}" />
            </p:selectOneMenu>

            <p:outputLabel for="debug" value="Debug: " />
            <p:inputText id="debug" value="#{dropdownView.debug}"/>
        </h:panelGrid>
...

Ajax 调用有效，当我的更新目标是 debug 时，我的 inputText 已更新，但是当我的更新目标是 city 时，selectOneMenu不是。

这是一个错误吗？我在滥用移动方面吗？这方面的文档似乎很少。

编辑

inputText 未包含在源代码中，已更正。

Answer 1

这是与 PrimeFaces 移动版相关的 JavaScript 中的错误。它没有考虑到移动渲染器插入额外的 JS 以随后将下拉列表的 HTML 表示重新定位在 DOM 中的其他位置（可以通过检查原始 [=35= 之间的差异找到证据） ] 输出（"View Source" 在浏览器中）和实际的 HTML DOM 树（"Inspect Element" 在浏览器中）。

Chrome 控制台中显示的确切 JavaScript 错误如下：

Uncaught NotFoundError: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.

（我希望你能把它作为一个学习提示，经常检查浏览器的控制台以获取线索）

最好的办法是将此作为错误报告给 PrimeFaces 人员。

与此同时，解决方法是将其包装在另一个（普通）元素中并改为更新它。

<p:selectOneMenu ...>
    ...
    <p:ajax ... update="cityWrapper" />
</p:selectOneMenu>

<h:panelGroup id="cityWrapper">
    <p:selectOneMenu id="city" ...>
        ...
    </p:selectOneMenu>
</h:panelGroup>

与具体问题无关：noSelectionOption="true" 仅在您将 hideNoSelectionOption="true" 添加到组件时有效。另见 a.o。 Best way to add a "nothing selected" option to a selectOneMenu in JSF。否则就别管了。

Primefaces Mobile ajax selectOneMenu 更新失败

Primefaces Mobile ajax update of selectOneMenu fails

ajax

jsf

selectonemenu

primefaces

primefaces-mobile