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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4148689/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 10:30:32  来源:igfitidea点击:

JSF - How do I implement a JavaScript "Are you sure?" prompt for a <h:commandButton>

javajavascriptjsfmyfaces

提问by Jim Tough

In my JSF 1.2 webapp I have a page with a <h:commandButton>that invokes an action method on a backing bean. This action will cause data to be removed/replaced in the database, so I want to avoid any situations where the user accidentally clicks on the command button.

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

I would like to implement a simple "Are you sure?" prompt with "Yes/No" or "OK/Cancel" options using JavaScript. I'm not great with JavaScript and I have never mixed JavaScript with JSF before. Can anyone provide a code snippet to show me how to implement this?

我想实现一个简单的“你确定吗?” 使用 JavaScript 提示“是/否”或“确定/取消”选项。我不擅长 JavaScript,而且我以前从未将 JavaScript 与 JSF 混合使用。谁能提供一个代码片段来告诉我如何实现这个?

Here is the piece of my JSP page where I declare the command button:

这是我声明命令按钮的 JSP 页面的一部分:

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

SOLUTION:

解决方案:

The solution provided by BalusC worked just fine. I wanted to also mention that it is easy to use text from a resource bundle as the prompt text. On my page, I load the resource bundle with an element like this:

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

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

The <f:loadBundle>must be inside your <f:view>. Then I add the code provided by BalusC to my command button element but substitute a string from my resource bundle for the 'Are you sure?' text, like this:

<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>

The line in my English resource file (just a plain text file with key/value pairs) looks like this:

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

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

回答by BalusC

Use the JavaScript confirm()function. It returns a booleanvalue. If it returns false, then the button's default action will be blocked, else it will be continued.

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

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

Since it already returns boolean, there's absolutely no need to wrap it around in an ifa suggested by other answers.

由于它已经返回boolean,因此绝对没有必要将它包装在if其他答案建议的a 中。

回答by bmeding

You could add the javascript to the onclick of the button.

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

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

回答by CoolBeans

This should work. Ideally it should be in a java script file.

这应该有效。理想情况下,它应该在一个 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>

回答by zzzzBov

I'm not sure what event you'll have to listen for (onclick i would assume) as I've never used JSF. Generically speaking, this should work.

我不确定您必须监听什么事件(我认为是 onclick),因为我从未使用过 JSF。一般来说,这应该有效。

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

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