JSF - 我如何实现 JavaScript “你确定吗？”提示输入 <h:commandButton>

Posted 2023-02-22

【中文标题】JSF - 我如何实现 JavaScript “你确定吗？”提示输入 <h:commandButton>

【英文标题】：JSF - How do I implement a JavaScript "Are you sure?" prompt for a <h:commandButton>

【发布时间】：2011-05-08 02:45:22

【问题描述】：

在我的 JSF 1.2 webapp 中，我有一个带有 <h:commandButton> 的页面，它调用支持 bean 上的操作方法。此操作将导致数据库中的数据被删除/替换，因此我想避免用户意外单击命令按钮的任何情况。

我想实现一个简单的“你确定吗？”使用 javascript 提示“是/否”或“确定/取消”选项。我对 JavaScript 不是很好，而且我以前从未将 JavaScript 与 JSF 混合使用。谁能提供一个代码 sn-p 来告诉我如何实现这个？

这是我声明命令按钮的 JSP 页面：

<h:commandButton 
    id="commandButtonAcceptDraft"
    title="#bundle.tooltipAcceptDraft" 
    action="#controller.actionReplaceCurrentReportWithDraft" 
    image="/images/checkmark.gif">
</h:commandButton>

解决方案：

BalusC 提供的解决方案运行良好。我还想提一下，使用资源包中的文本作为提示文本很容易。在我的页面上，我使用如下元素加载资源包：

<f:loadBundle basename="com.jimtough.resource.LocalizationResources" var="bundle" />

<f:loadBundle> 必须在您的 <f:view> 内。然后我将 BalusC 提供的代码添加到我的命令按钮元素，但用我的资源包中的字符串替换“你确定吗？”文本，像这样：

<h:commandButton 
    id="commandButtonAcceptDraft"
    title="#bundle.tooltipAcceptDraft" 
    action="#controller.actionReplaceCurrentReportWithDraft" 
    image="/images/checkmark.gif"
    onclick="return confirm('#bundle.confirmationTextAcceptDraft')">
</h:commandButton>

我的英文资源文件（只是一个带有键/值对的纯文本文件）中的行如下所示：

# text displayed in user prompt when calling confirm()
confirmationTextAcceptDraft=This will overwrite the current report and cannot be undone. Are you sure?

【参考方案1】：

我不确定你必须听什么事件（我假设是 onclick），因为我从未使用过 JSF。一般来说，这应该可以工作。

var element = document.getElementById('commandButtonAcceptDraft');

element.onclick = function(e)
  return confirm('Are you sure etc...');
;

【讨论】：

如果你想使用javascript来getElementById，那么我相信你需要包含表单名称。在 JSF 中，元素的实际 ID 类似于 'formName:commandButtonAcceptDraft'

【参考方案2】：

您可以将 javascript 添加到按钮的 onclick 中。

<h:commandButton  
    id="commandButtonAcceptDraft" 
    title="#bundle.tooltipAcceptDraft"  
    action="#controller.actionReplaceCurrentReportWithDraft"  
    onclick="return confirm('Are you sure?')"
    image="/images/checkmark.gif"> 
</h:commandButton> 

【讨论】：

在外部脚本而不是内联脚本中添加事件是有好处的。这确实有效，但如果您需要将其添加到大量项目中，或者将来需要更改消息，则不会很容易对其进行编辑。

【参考方案3】：

这应该可行。理想情况下，它应该在 java 脚本文件中。

<h:commandButton 
    id="commandButtonAcceptDraft"
    title="#bundle.tooltipAcceptDraft" 
    action="#controller.actionReplaceCurrentReportWithDraft" 
    image="/images/checkmark.gif"
     onclick="if (!confirm('Are you sure?')) return false">
</h:commandButton>

【讨论】：

在我的情况下，这是正确的解决方案。 @BalusC 解决方案导致使用 M​​yFaces 和 BootsFaces 重新加载页面。不知道为什么。

【参考方案4】：

使用 JavaScript confirm() 函数。它返回一个boolean 值。如果返回false，则按钮的默认动作将被阻止，否则将继续。

<h:commandButton onclick="return confirm('Are you sure?')" />

由于它已经返回 boolean，因此完全没有必要将其包裹在 if 中，这是其他答案所建议的。

【讨论】：

@CoolBeans 解决方案在我的情况下是正确的，否则该操作会重新加载页面。我正在使用 MyFaces 和 BootsFaces

@MitchBroadhead 然后有问题的 JSF impl 或组件库以不正确的方式生成 onclick 属性。只需查看生成的 html 输出并向负责的开发人员报告问题。

我在 BootsFaces 提交了一个错误，Stephan 现在已经解决了这个问题