单个Bean下PrimeFaces单commandButton触发两类confirmDialog的实现问题

问题修复方案 #

以下是具体问题点和对应修复步骤：

• 修复XML模板错误

  1. 两个<p:confirmDialog>使用了重复的id="confirmValidData"，DOM元素ID重复会导致JS无法正确识别目标组件，将第二个对话框的ID修改为confirmForceData
  2. 两个对话框的组件变量属性拼写错误：你写的是wigdetVar，正确拼写为widgetVar，拼写错误会导致PF('xxx')找不到组件实例
  3. 提交按钮的update属性没有添加第二个对话框的ID，修改按钮update属性为update="confirmValidData confirmForceData growl"，保证AJAX请求后两个对话框的状态都能正确更新

• 修复后端Bean代码错误

  1. 你代码里定义了两个同名同参数的forceRequest方法，Java不允许同参数的方法重载，先删除多余的方法定义，保留目标弹窗逻辑的方法即可
  2. 弹窗逻辑不需要调用context.openDialog("Confirm")，该API是用来打开独立对话窗口的，和你页面定义的p:confirmDialog组件无关，直接删除该行
  3. 直接调用PF实例的show()方法即可弹出对话框，不需要调用jq.click()，修改执行语句为context.execute("PF('confirmForce').show();");

• 校验失败弹窗逻辑补充
  在参数校验失败的分支中，调用context.execute("PF('confirmValidData').show();");即可触发对应校验弹窗。

修复后的参考代码

按钮代码

<p:commandButton id="myButton" update="confirmValidData confirmForceData growl" value="Submit" actionListener="#{message.sendMessage}" ... />

对话框代码

<!-- 校验失败弹窗 -->
<p:confirmDialog header="#{message.invalidValuesHdr}" id="confirmValidData" message="#{message.invalid}" widgetVar="confirmValidData">
    <p:commandButton value="Ok" update="growl" oncomplete="PF('confirmValidData').hide()"/>
</p:confirmDialog>

<!-- 并发请求弹窗 -->
<p:confirmDialog header="#{message.forceRequestHdr}" id="confirmForceData" message="#{message.forceRequestTip}" widgetVar="confirmForce">
    <p:commandButton value="Ok" update="growl" oncomplete="PF('confirmForce').hide()"/>
</p:confirmDialog>

Bean代码

@ViewScoped
@Override 
public void sendMessage() {
  RequestContext context = RequestContext.getCurrentInstance();
  // 参数校验逻辑
  if (!checkParamsValid()) {
    // 校验失败弹出校验对话框
    context.execute("PF('confirmValidData').show();");
    return;
  }
  // 并发标识检测逻辑
  if (checkConcurrentTag()) {
    forceRequest();
    return;
  }
  // 正常业务逻辑执行
}

public void forceRequest(){
  RequestContext context = RequestContext.getCurrentInstance();
  context.execute("PF('confirmForce').show();");
}

内容的提问来源于stack exchange，提问作者Steve