我想使用Primefaces 5.2创建一个移动表单,其中一个selectOneMenu结果selectOneMenu通过Ajax 更新第二个,就像这里的展示示例一样:http : //www.primefaces.org/showcase/ui/ajax/dropdown.xhtml,然后是移动版本。
selectOneMenu
我创建了一个JSF页面和backingbean 正是 像展示例子,它的工作原理。
但是,当我使用<f:view renderKitId="PRIMEFACES_MOBILE"/>第二个selectOneMenu元素添加移动外观时,更新后将其呈现为纯色,并显示永久旋转器。
<f:view renderKitId="PRIMEFACES_MOBILE"/>
... <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不是。
debug
inputText
city
这是一个错误吗?我在滥用移动方面吗?对此文档似乎很匮乏。
编辑
在inputText不包括在源极,进行校正。
这是与PrimeFaces移动版关联的JavaScript中的错误。它没有考虑到移动渲染器会插入其他JS,然后在DOM中将下拉列表的HTML表示重新定位到其他位置(可以通过检查原始HTML输出(浏览器中的“查看源代码”)与实际的HTMLDOM树(浏览器中的“检查元素”)。
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"到组件时才有效。
noSelectionOption="true"
hideNoSelectionOption="true"