是否可以使用 JSF ajax 更新非 JSF 组件（纯 HTML）？

Posted 2023-02-22

【中文标题】是否可以使用 JSF ajax 更新非 JSF 组件（纯 HTML）？

【英文标题】：Is it possible to update non-JSF components (plain HTML) with JSF ajax?

【发布时间】：2012-10-12 03:06:35

【问题描述】：

是否可以更新我的页面中不是 JSF 组件的部分？

例如，我可以更新纯 html <div> 还是需要将其包装在 JSF 组件中？

【问题讨论】：

JSF update primefaces tree children 的可能重复项

@MartinStettner 这是关于更新 JSF 中的纯 HTML 元素而不是 primefaces 树组件。

【参考方案1】：

是否可以更新我的页面中不是 JSF 组件的部分？

没有。要更新的组件必须由 UIViewRoot#findComponent() 提供，以便 JSF 可以找到它们，在其上调用 encodeAll()，捕获生成的 HTML 输出并将其传递回 ajax 响应中，以便 javascript 可以更新 HTML DOM 树与它。纯 HTML 元素在 JSF 组件树中不表示为真正的 UIComponent 实例，因此 JSF 已经无法首先找到它们。

---

例如，我可以更新纯 HTML <div> 还是需要将其包装在 JSF 组件中？

您需要将它包装在一个 JSF 组件中，例如 <h:panelGroup>。但是，您可以只使用 <h:panelGroup layout="block"> 在 JSF 中表示一个真实的 <div>。这样您就不需要将 <div> 包装在另一个 JSF 组件中。

<h:panelGroup layout="block" id="foo">
    ...
</h:panelGroup>

从 JSF 2.2 开始，您可以使用带有 jsf:id 属性的新 passthrough elements 功能将 HTML(5) 元素声明为 JSF 组件。

<... xmlns:jsf="http://xmlns.jcp.org/jsf">

<div jsf:id="foo">
    ...
</div>

<main jsf:id="bar">
    ...
</main>

<section jsf:id="baz">
    ...
</section>

他们将按原样呈现他们的输出，但在幕后是一个具体的UIPanel 实例。

不过，composite components 有一个极端情况。您可以使用以下方法来创建一个 可由 ajax 更新的 HTML 元素。

<cc:implementation>
    <span id="#cc.clientId">
        ...
    </span>
</cc:implementation>

这种方法有效的解释是，即使复合组件不将自身呈现到 HTML 输出，它是本身可被UIViewRoot#findComponent() 使用。

另见：

How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar" Why do I need to nest a component with rendered="#some" in another component when I want to ajax-update it? Rerendering composite component by ajax

【讨论】：

我不明白的是 cc.clientId 不是 whole 组件的 id 吗？我还不太了解 jsf，但我不会更新整个“包装”组件而不是 div 本身吗？

我的特殊情况是我想更新 primefaces 树的子节点，但我无法包装子节点。无论如何，我使用 primefaces expand 方法找到了一个解决方案:) (***.com/questions/13000870/…)

这与当前问题无关。

是的，我只是想告诉你，我还有幸福的结局

关于 jsf 2.2 passthrough 的好补充...从来没想过。

【参考方案2】：

好像不行。

要更新某些内容，请将其包装在“可更新”组件中（在 primeaces p:outputpanel 中）并更新该组件。

另外：在您的特殊情况下，您可以通过这种方式刷新 p:tree 的子级：JSF update primefaces tree children

（哈哈一直想用第三人称跟我说话）

【参考方案3】：

AFAIK 你通过它们的 ID 更新组件，因为常规元素可以有一个 ID，只要你得到正确的 ID 就应该是可能的 ;-)

【讨论】：

hm 并且当我有例如一个 div 时： right id 不是“something”？因为当我添加<p:remoteCommand name="updatte" update=":something"></p:remoteCommand> 时，我得到一个Cannot find component with identifier "something" referenced from "j_idt62:j_idt68:j_idt69".

@NickRussler 我想那是不可能的:-) 你想做什么？也许还有其他选择。

我想更新一个 primefaces 树的树节点，而不更新整个树

@NickRussler 您无法更新树的单个节点。节点的 ID 对客户端不可见。检查生成的 JSF 页面的 HTML。

我可以在客户端获取节点 id，但是如果我将该 id 传递给 PrimeFaces.ajax.AjaxRequest 它不会更新（而当我传递树 id 时它会更新）.. . 所以获取id不是问题