在 HTML 输出中查找实际客户端 ID
您需要查看生成的 HTML 输出以找出正确的客户端 ID。在浏览器中打开页面,右键单击并查看源代码。找到感兴趣的 JSF 组件的 HTML 表示并将其id
作为客户端 ID。您可以根据当前命名容器以绝对或相对方式使用它。见下一章。
注意:如果它恰好包含迭代索引,如:0:
,:1:
等(因为它在迭代组件中),那么您需要意识到并不总是支持更新特定的迭代轮次。有关详细信息,请参阅答案底部。
记住NamingContainer
组件并始终给它们一个固定的 ID
如果您想通过 ajax process/execute/update/render 引用的组件位于同一个NamingContainer
父级中,则只需引用其自己的 ID。
<h:form id="form">
<p:commandLink update="result"> <!-- OK! -->
<h:panelGroup id="result" />
</h:form>
如果它不在相同的内部NamingContainer
,那么您需要使用绝对客户端 ID 来引用它。绝对客户端 ID 以NamingContainer
分隔符开头,默认情况下为:
.
<h:form id="form">
<p:commandLink update="result"> <!-- FAIL! -->
</h:form>
<h:panelGroup id="result" />
<h:form id="form">
<p:commandLink update=":result"> <!-- OK! -->
</h:form>
<h:panelGroup id="result" />
<h:form id="form">
<p:commandLink update=":result"> <!-- FAIL! -->
</h:form>
<h:form id="otherform">
<h:panelGroup id="result" />
</h:form>
<h:form id="form">
<p:commandLink update=":otherform:result"> <!-- OK! -->
</h:form>
<h:form id="otherform">
<h:panelGroup id="result" />
</h:form>
NamingContainer
组件例如<h:form>
, <h:dataTable>
, <p:tabView>
, <cc:implementation>
(因此,所有复合组件)等。您可以通过查看生成的 HTML 输出轻松识别它们,它们的 ID 将添加到所有子组件的生成客户端 ID 之前。请注意,当它们没有固定 ID 时,JSF 将使用j_idXXX
格式自动生成的 ID。您应该通过给他们一个固定的 ID 来绝对避免这种情况。在开发过程中,OmniFacesNoAutoGeneratedIdViewHandler
可能会对此有所帮助。
如果您知道找到有UIComponent
问题的 javadoc,那么您也可以在那里检查它是否实现了NamingContainer
接口。例如,HtmlForm
(UIComponent
后面的<h:form>
标签)显示它实现NamingContainer
了,但HtmlPanelGroup
(UIComponent
后面的<h:panelGroup>
标签)没有显示它,所以它没有实现NamingContainer
。这是所有标准组件的 javadoc ,这是 PrimeFaces 的 javadoc。
解决您的问题
所以在你的情况下:
<p:tabView id="tabs"><!-- This is a NamingContainer -->
<p:tab id="search"><!-- This is NOT a NamingContainer -->
<h:form id="insTable"><!-- This is a NamingContainer -->
<p:dialog id="dlg"><!-- This is NOT a NamingContainer -->
<h:panelGrid id="display">
生成的 HTML 输出<h:panelGrid id="display">
如下所示:
<table id="tabs:insTable:display">
您需要准确地将其id
作为客户端 ID,然后:
使用前缀以用于update
:
<p:commandLink update=":tabs:insTable:display">
引用外部 include/tagfile/composite
如果此命令链接在包含/标记文件内,而目标在其中,因此您不一定知道当前命名容器的命名容器父级的 ID,那么您可以通过UIComponent#getNamingContainer()
如下方式动态引用它:
<p:commandLink update=":#{component.namingContainer.parent.namingContainer.clientId}:display">
或者,如果此命令链接位于复合组件内部而目标位于其外部:
<p:commandLink update=":#{cc.parent.namingContainer.clientId}:display">
或者,如果命令链接和目标都在同一个复合组件内:
<p:commandLink update=":#{cc.clientId}:display">
另请参阅在渲染/更新属性的模板中获取父命名容器的 ID
它是如何在幕后工作的
这一切都在javadoc中指定为“搜索表达式”:UIComponent#findComponent()
搜索表达式由一个标识符(与 a 的 id 属性完全匹配UIComponent
)或由字符值链接的一系列此类标识符组成UINamingContainer#getSeparatorChar
。搜索算法应按如下方式运行,尽管可以使用替代算法,只要最终结果是一样的:
- 通过在满足以下条件之一时立即停止来确定
UIComponent
将作为搜索基础的内容:
- 如果搜索表达式以分隔符开头(称为“绝对”搜索表达式),则基将是
UIComponent
组件树的根。前导分隔符将被删除,搜索表达式的其余部分将被视为“相对”搜索表达式,如下所述。
- 否则,如果这
UIComponent
是一个NamingContainer
它将作为基础。
- 否则,搜索该组件的父级。如果
NamingContainer
遇到 a ,它将是基础。
- 否则(如果没有
NamingContainer
遇到)根UIComponent
将是基础。
- 搜索表达式(可能在上一步中修改)现在是一个“相对”搜索表达式,用于在基本组件的范围内定位具有匹配 id 的组件(如果有)。比赛进行如下:
- 如果搜索表达式是一个简单的标识符,则将该值与 id 属性进行比较,然后递归遍历 base 的 facets 和 children
UIComponent
(除非NamingContainer
找到了后代,则不会搜索其自己的 facets 和 children)。
- 如果搜索表达式包含多个由分隔符分隔的标识符,则第一个标识符用于
NamingContainer
根据前一个项目符号点中的规则定位 a。然后,将调用findComponent()
this的方法NamingContainer
,传递搜索表达式的其余部分。
请注意,PrimeFaces 也遵循 JSF 规范,但 RichFaces 使用“一些额外的例外”。
“reRender”使用UIComponent.findComponent()
算法(有一些额外的例外)在组件树中查找组件。
这些额外的异常没有详细描述,但众所周知,相对组件 ID(即:
那些NamingContainer
不NamingContainer
以顺便说一句昂贵的工作)。
从不使用prependId="false"
如果这一切仍然不起作用,请验证您是否没有使用<h:form prependId="false">
. 这将在处理 ajax 提交和渲染期间失败。另请参阅此相关问题:UIForm with prependId="false" break <f:ajax render>。
引用迭代组件的特定迭代轮次
很长一段时间以来,不可能在迭代组件中引用特定的迭代项,<ui:repeat>
如下<h:dataTable>
所示:
<h:form id="form">
<ui:repeat id="list" value="#{['one','two','three']}" var="item">
<h:outputText id="item" value="#{item}" /><br/>
</ui:repeat>
<h:commandButton value="Update second item">
<f:ajax render=":form:list:1:item" />
</h:commandButton>
</h:form>
然而,自从 Mojarra 2.2.5<f:ajax>
开始支持它(它只是停止验证它;因此您将永远不会再遇到问题中提到的异常;稍后计划进行另一个增强修复)。
这只在当前的 MyFaces 2.2.7 和 PrimeFaces 5.2 版本中还不起作用。支持可能会出现在未来的版本中。同时,最好的办法是更新迭代组件本身,或者更新父组件以防它不呈现 HTML,例如<ui:repeat>
.
使用 PrimeFaces 时,请考虑搜索表达式或选择器
PrimeFaces Search Expressions允许您通过 JSF 组件树搜索表达式引用组件。JSF 有几个内置的:
@this
: 当前组件
@form
: 父母UIForm
@all
: 整个文档
@none
: 没有
PrimeFaces 通过新的关键字和复合表达式支持增强了这一点:
@parent
: 父组件
@namingcontainer
: 父母UINamingContainer
@widgetVar(name)
: 由给定标识的组件widgetVar
您还可以在复合表达式中混合这些关键字,例如@form:@parent
,@this:@parent:@parent
等。
PrimeFaces 选择器 (PFS)允许@(.someclass)
您通过 jQuery CSS 选择器语法引用组件。例如,在 HTML 输出中引用具有所有通用样式类的组件。这在您需要引用“很多”组件的情况下特别有用。这仅要求目标组件在 HTML 输出中具有所有客户端 ID(固定或自动生成,无关紧要)。另请参阅update="@(.myClass)" 中的 PrimeFaces 选择器如何工作?