javascript - 在 javascript 中获取 primefaces widgetVar 并更新它

Question

我有一个像这样的 primefaces 组件:

<p:panel styleClass="errorsPanelClass" id="errorsPanel" header="Messages" toggleable="true" effect="drop" toggleSpeed="0" closeSpeed="0" widgetVar="errorsPanelWidget">

我正在尝试在 javascript 上下文中获取组件并更新它。

我已经尝试过:

function getWidgetVarById(id) {
   for (var propertyName in PrimeFaces.widgets) {
     if (PrimeFaces.widgets[propertyName].id === id) {
       return PrimeFaces.widgets[propertyName];
     }
   }
}

或

How to find a widgetVar?

或

Get widgetVar with JavaScript or check/uncheck all other PrimeFaces checkboxes

如果我能找到一个按类获取 widgetVar 的解决方案，那就太好了，但欢迎任何其他解决方案。

我也试过:

function getWidgetVarById() {
    for ( var propertyName in PrimeFaces.widgets) {
        alert(PrimeFaces.widgets[propertyName].id);
    }
}

但我收到 javascript 错误“'PrimeFaces.widgets.length' 为空或不是对象”

有什么想法吗？

Answer 1

PrimeFaces 3.5 的 id 和 widgetVar 之间没有映射。在 3.5 中，小部件被添加到“窗口”对象中，而不是存储在其他地方。这意味着 widgetVar 已经直接是一个你可以使用的变量。

<p:panel id="errorsPanel" widgetVar="errorsPanelWidget">

3.5/4.0:(在 4.0 中这仍然有效，但已弃用，取而代之的是 PF('..') 方式)errorsPanelWidget.close()

5.0 及更高版本:PF('errorsPanelWidget').close()(除非您配置旧模式，否则它将像 3.5/4.0 一样运行)

然后最简单的方法是使用一个约定，你将 widgetVar 命名为你的 id 但带有后缀，例如id_widget。您可以(建议不要这样做)将 widgetVar 留在外面，然后小部件与 id 相同(这在某些情况下会导致分类，这就是 PF 放弃此约定的原因)。

并且您仍然可以检查在 3.5 中 widgetVar 值是否以一种或另一种方式添加到小部件的外部 html 元素。然后你可以用一些 jquery 检索它。就个人而言，我在以前的 PF 版本中使用了“约定”方式(将“Widget”附加到也在 id 中的值并将其放入 widgetVar 属性中)

如果“更新”小部件，你的意思是更新小部件的内容，你不能。没有refresh() 类方法可以做到这一点。你可以做的是将 id(!) 发送到服务器并通过 requestContext 像这样执行 update(..)

RequestContext context = RequestContext.getCurrentInstance();
context.update("errorsPanel");

但是在您更新列表服务器端时就这样做可能会更好。所以这可能是您落入了 XY 陷阱。

但如果真的需要，这里有一个有效的例子，使用 PrimeFaces extensions remoteCommand因为这是最简单的方法)

xhtml:

<pe:remoteCommand id="refreshWidgetCommand" name="refreshWidget" process="@this" actionListener="#{updateWidgetController.refresh}">  
    <pe:methodSignature parameters="java.lang.String"/>  
    <pe:methodParam name="id"/>  
</pe:remoteCommand>  

bean 类:

@ManagedBean  
@RequestScoped  
public class UpdateWidgetController {  

    public void refresh(final String id) {  

        RequestContext context = RequestContext.getCurrentInstance();
        context.update(id);
    }
}

调用 refreshWidget('errrosPanel');将实现你想要的。

不想使用 PFE(或由于版本不兼容而无法使用)，您可以使用 PF remoteCommand 实现相同的目的但 3.5 的具体示例可能略有不同