PrimeFaces中dialog内按钮更新主表单dataTable提示找不到组件如何解决

解决方案 #

先排查基础笔误 #

你给出的示例代码中，dialog内Save按钮的action属性缺少开头双引号，错误写法为action=#{bean.save}"，修正为action="#{bean.save}"，先排除语法问题导致的异常。

针对不同场景的修复方案 #

场景1：使用静态dialog（p:dialog标签直接写在当前页面）

这是最常见的场景，按以下优先级处理：

• 核对实际客户端ID：打开浏览器F12开发者工具，找到主页面dataTable对应的HTML元素，复制它的id属性值，在update属性里加冒号前缀使用即可，比如元素实际ID为frmMain:tblFormItem，update就写:frmMain:tblFormItem。
• 检查主表单配置：如果主表单frmMain加了prependId="false"配置，表单不会作为ID前缀拼接给子组件，此时update路径改为:tblFormItem即可。
• 兼容性最高的绑定方案：不想手动核对ID的话可以用组件绑定，完全避免ID路径写错的问题：
  1. 后台托管Bean中添加dataTable的绑定属性：

  import org.primefaces.component.datatable.DataTable;
  // 类内部
  private DataTable tblFormItem;
  // 生成getter、setter方法
  

  2. 页面主表单的dataTable添加binding属性：

  <p:dataTable id="tblFormItem"
               widgetVar="wgFormItem"
               binding="#{bean.tblFormItem}">
  

  3. 修改Save按钮的update属性，直接引用绑定组件的客户端ID：

  <p:commandButton value="Save"
                   update=":messages #{bean.tblFormItem.clientId}"
                   action="#{bean.save}"/>
  

  该方案不受组件树层级、dialog挂载位置影响，不会出现找不到组件的问题。

场景2：使用PrimeFaces动态对话框API（后台openDialog调用openDynamic打开独立视图）

此时dialog对应独立的JSF视图，和父页面组件树隔离，无法直接通过update更新父页面组件，改用回调参数方式处理：

1. 后台save方法执行成功后，添加回调参数并关闭对话框：

PrimeFaces pf = PrimeFaces.current();
pf.ajax().addCallbackParam("saveSuccess", true);
pf.dialog().closeDialog(null);

2. 父页面触发打开dialog的按钮添加oncomplete逻辑，在保存成功后刷新dataTable：

<p:commandButton value="Add value"
                 onstart="PF('wgDialog').show()"
                 oncomplete="if (args && args.saveSuccess) PF('wgFormItem').update();"
                 action="#{bean.openDialog}"/>

内容的提问来源于stack exchange，提问作者Minh Nguyễn Nguyễn Đức