ajax - 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 中的其他位置(可以通过检查原始 HTML 输出(浏览器中的“查看源代码”)和实际的 HTML DOM 树(浏览器中的“检查元素”)。

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 。否则，请忽略它。