2

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

我的问题与这个问题非常相似：Primefaces Mobile 的 Ajax 没有更新 <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>
...

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

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

编辑

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

4

1 回答 1

3

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

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

未捕获的 NotFoundError：无法在“节点”上执行“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"到组件时才会生效。另请参阅在 JSF 中向 selectOneMenu 添加“未选择”选项的最佳方式。否则，只需忽略它。

于 2015-08-17T15:40:26.480 回答