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页面和backbean 完全，就像展示示例一样，并且它可以工作。

但是，当我使用<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>
...

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

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

修改

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

Answer 1

这是与PrimeFaces移动相关的JavaScript中的错误。它没有考虑移动渲染器插入额外的JS以后再重新定位DOM中其他位置的下拉列表的HTML表示（可以通过检查原始HTML输出（浏览器中的“查看源”）和实际的HTML DOM树（浏览器中的“Inspect Element”）。

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

Uncaught NotFoundError：无法在'Node'上执行'replaceChild'：要替换的节点不是此节点的子节点。

（我希望你能把它作为学习提示，始终检查浏览器控制台的线索）

你最好的办法就是把这个错误报告给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 selectOneMenu的Mobile ajax更新失败

1 个答案: