Primefaces SelectBooleanCheckbox 确认答案

【问题标题】：Primefaces SelectBooleanCheckbox with confirmationPrimefaces SelectBooleanCheckbox 确认
【发布时间】：2016-04-06 08:21:21
【问题描述】：

我想在 primefaces 中显示选择/取消选择复选框的确认对话框。我试过了

<p:selectBooleanCheckBox value="#{myBean.checkBoxValue}">
    <p:confirm message="Are you sure?"/>
</p:selectBoooleanCheckBox>

但它不起作用，因为 selectBooleanCheckBox 不可确认。有什么办法可以解决这个问题吗？

【问题讨论】：

标签： jsf primefaces

【解决方案1】：

一种方法是创建自己的确认对话框，例如

<p:confirmDialog widgetVar="myOwnConfirmDialog" message="Confirm ?">
    <p:commandButton value          =   "Yes"
                     action         =   "#{myBean.checkConfirmedAction}"
                     oncomplete     =   "PF('myOwnConfirmDialog').hide()"/>

    <p:commandButton value          =   "No" 
                     action         =   "#{myBean.checkCancelledAction}"
                     oncomplete     =   "PF('checkConfirmwdgt').toggle(); PF('myOwnConfirmDialog').hide()"/>
</p:confirmDialog>

然后使用onchange事件打开confirmDialog：

<p:selectBooleanCheckbox    value="#{myBean.checkBoxValue}" 
                            onchange="PF('myOwnConfirmDialog').show()" 
                            widgetVar="checkConfirmwdgt">
</p:selectBooleanCheckbox>

编辑： 我在回答中犯了一个错字和错误。错字实际上是在<p:selectBooleanCheckbox> 内使用<p:confirm>（你是对的，selectBooleanCheckbox 无法确认。）错误在于<p:selectBooleanCheckbox> 不会触发 onclick，而只会触发 onblur、onchange 和 onfocus。使用 onchange 就可以了。

【讨论】：

好主意 - 但它不起作用。 :-( 该组件仍然无法确认（PF 5.3），因此不允许使用标签....最烦人的是，即使“onclick”也没有被触发....所以我手动解决这个问题的所有想法都丢失了.
我编辑了答案并对其进行了测试。现在它应该可以工作了。
好的....很好。所以诀窍是使用“onblur”或“onchange”而不是“onclick”。遗憾的是 PF 不允许“onclick”或实现“Confirmable”。

【解决方案2】：

我以不同的方式解决了它——不想等到 PrimeFaces 实现接口。我正在显示两个“commandButton”——其中只有一个是根据状态呈现的。它们包含在一个表单中 - 或者您可以使用通过 AJAX 更新的命名面板（在我的示例中为“selectProductUsageForm”）。第一个表示活动（切换）状态 - 第二个表示未切换状态。

解决方案是模仿显示行为——Primefaces 将其封装在 CSS 类“ui-state-active”（theme.css）中。我将 CSS 类的内容复制到我自己的 CSS 类“man-ui-state-active”中，并将其分配给第一个按钮。

 <h:form id="selectProductUsageForm" 
    rendered="#{productManager.mayEditSelected}">
   <span class="productGroupUsageBtnContainer">


    <p:commandButton 
        value="#{msg['product.inUseByGroup']} (#{login.currentUser.group.name})" styleClass="man-ui-state-active"
        icon="ui-icon-check"
        action="#{productManager.toggleCurrentProductGroupUsage}" 
        rendered="#{productManager.currentProductGroupUsage}" update="selectProductUsageForm">
            <p:confirm message="Are you sure?"/>
    </p:commandButton>
    <p:commandButton value="#{msg['product.notInUseByGroup']} (#{login.currentUser.group.name})" 
        icon="ui-icon-close"
        action="#{productManager.toggleCurrentProductGroupUsage}" 
        rendered="#{not productManager.currentProductGroupUsage}" update="selectProductUsageForm">
            <p:confirm message="Are you sure?"/>
    </p:commandButton>
    </span>
   </h:form>

CSS

.ui-button.man-ui-state-active {
    background-color: #e6e6e6;
    background-color: #d9d9d9 \9;
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

【讨论】：

【解决方案3】：

您想在复选框更改时显示通知（信息、警报、...）。这样做：

<p:selectBooleanCheckBox value="#{myBean.checkBoxValue}"
  onchange="if(!confirm('Your warning or information message here!!!')) 
   return false">
   <p:ajax listener="#{myBean.yourMethodHere()}" 
      update="theComponentYouWantToUpdate" />
</p:selectBoooleanCheckBox>

【讨论】：