selectOneMenu用于对Primefaces移动AJAX更新失败 [英] Primefaces Mobile ajax update of selectOneMenu fails

问题描述

我要创建使用Primefaces 5.2移动形式，其中一个 selectOneMenu用于结果更新第二 selectOneMenu用于通过Ajax，酷似这里展示的例子： http://www.primefaces.org/showcase/ UI / AJAX / dropdown.xhtml 但随后的移动版本。

I want to create a mobile form using Primefaces 5.2 where one selectOneMenu result updates a second selectOneMenu via Ajax, exactly like the showcase example here: http://www.primefaces.org/showcase/ui/ajax/dropdown.xhtml but then a mobile version.

我的问题是非常相似，这一个：<一href="http://stackoverflow.com/questions/30245639/primefaces-mobiles-ajax-does-not-update-a-pselectonemenu">Primefaces移动的Ajax不更新＆LT;电话号码：selectOneMenu用于＆GT; ，但没有答案。

My question is very similar to this one: Primefaces Mobile's Ajax does not update a <p:selectOneMenu> but there is no answer.

我创建了一个JSF页面和backingbean的完全的像展示的例子，它的工作原理。

I have created a JSF page and backingbean exactly like the showcase example, and it works.

然而，当我添加使用移动方面＆LT; F：鉴于renderKitId =PRIMEFACES_MOBILE/＆GT; 第二个 selectOneMenu用于呈现平淡更新后，将显示一个永久的微调。

However when I add the mobile aspect using <f:view renderKitId="PRIMEFACES_MOBILE" /> the second selectOneMenu is rendered plain after the update, and a perpetual spinner is displayed.

...
<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调用的作品，当我更新的目标是调试我的的inputText 更新，但是当我的更新目标是城市的 selectOneMenu用于不是。

The Ajax call works, when my update target is debug my inputText is updated, but when my update target is city the selectOneMenu is not.

这是一个错误？我是否滥用了移动方面？文档似乎缺乏这一点。

Is this a bug? Am I misusing the Mobile aspect? Documentation seems scarce on this.

修改

在的inputText 不包含在源，修正研究。

The inputText was not included in the source, corrected.

推荐答案

这是与PrimeFaces移动设备有关在JavaScript中的一个错误。它没有考虑到移动渲染器中插入额外的JS事后重新定位下拉的HTML再presentation其他地方的DOM（证据可以通过检查（查看源文件，在原始的HTML输出之间的差别发现浏览器）和实际的HTML DOM树（在浏览器中检查元素）。

This is a bug in the JavaScript associated with PrimeFaces mobile. It didn't take into account that the mobile renderer inserts additional JS to afterwards relocate the HTML representation of the dropdown elsewhere in the DOM (evidence can be found by checking the difference between raw HTML output ("View Source" in browser) and the actual HTML DOM tree ("Inspect Element" in browser).

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

The exact JavaScript error as shown in Chrome's console is as below:

未捕获NotFoundError：无法执行的replaceChild上节点：在节点被替换不是此节点的子

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

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

您最好的选择是报告这是错误到PrimeFaces家伙。

Your best bet is to report this as bug to PrimeFaces guys.

在此期间，解决办法是把它包在另一个（平原）的元素，而是对其进行更新。

In the meanwhile, the workaround is to wrap it in another (plain) element and update it instead.

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

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

---

无关的具体问题：即 noSelectionOption =真正的拥有时只添加效果 hideNoSelectionOption =真正的的组件。另请参见A.O. <一href="http://stackoverflow.com/questions/11360030/best-way-to-add-a-nothing-selected-option-to-a-selectonemenu-in-jsf/">Best的方式来增加一个＆QUOT;没有选择＆QUOT;选择在JSF 一个selectOneMenu用于。否则，就这么走了吧。

---

Unrelated to the concrete problem: that noSelectionOption="true" has only effect when you add hideNoSelectionOption="true" to the component. See also a.o. Best way to add a "nothing selected" option to a selectOneMenu in JSF. Otherwise, just leave out it.

这篇关于selectOneMenu用于对Primefaces移动AJAX更新失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！