移动ajax更新selectOneMenu失败

Question

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

我的问题与此非常相似:Primefaces Mobile's Ajax不更新但是没有答案。

我已经创建了一个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不是。

这是一个bug吗?我是否滥用了手机方面的内容?这方面的文档似乎很少。

编辑

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

Answer 1

这是与PrimeFaces mobile相关的JavaScript中的一个bug。它没有考虑到移动渲染器插入额外的JS，然后在DOM的其他地方重新定位下拉菜单的HTML表示(证据可以通过检查原始HTML输出(浏览器中的"查看源")和实际的HTML DOM树(浏览器中的"检查元素")之间的差异找到)。

确切的JavaScript错误显示在Chrome的控制台如下:

Uncaught NotFoundError: Failed to execute ' replacecchild ' on 'Node':要替换的节点不是这个节点的子节点。

(我希望你能把它作为一个学习提示，总是检查浏览器的控制台的线索)

你最好的办法是把这个bug报告给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.添加"未选定"的最佳方法选项到JSF中的selectOneMenu。