[英]JSF - How do I implement a JavaScript “Are you sure?” prompt for a <h:commandButton>
In my JSF 1.2 webapp I have a page with a <h:commandButton>
that invokes an action method on a backing bean. 在我的JSF 1.2 webapp中,我有一个带有<h:commandButton>
的页面,它调用辅助bean上的action方法。 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. 此操作将导致数据库中的数据被删除/替换,因此我希望避免用户意外单击命令按钮的任何情况。
I would like to implement a simple "Are you sure?" 我想实现一个简单的“你确定吗?” prompt with "Yes/No" or "OK/Cancel" options using JavaScript. 使用JavaScript提示“是/否”或“确定/取消”选项。 I'm not great with JavaScript and I have never mixed JavaScript with JSF before. 我对JavaScript并不擅长,之前我从未将JavaScript与JSF混合在一起。 Can anyone provide a code snippet to show me how to implement this? 任何人都可以提供代码片段来向我展示如何实现这一点吗?
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. BalusC提供的解决方案运作得很好。 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: 在我的页面上,我使用如下元素加载资源包:
<f:loadBundle basename="com.jimtough.resource.LocalizationResources" var="bundle" />
The <f:loadBundle>
must be inside your <f:view>
. <f:loadBundle>
必须位于<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?' 然后我将BalusC提供的代码添加到我的命令按钮元素中,但用我的资源包中的字符串替换'你确定吗?' text, like this: 文字,像这样:
<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?
Use the JavaScript confirm()
function. 使用JavaScript confirm()
函数。 It returns a boolean
value. 它返回一个boolean
值。 If it returns false, then the button's default action will be blocked, else it will be continued. 如果返回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 if
a suggested by other answers. 因为它已经返回boolean
,但绝对没有必要将其套在if
一个由其他答案建议。
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>
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>
I'm not sure what event you'll have to listen for (onclick i would assume) as I've never used JSF. 因为我从未使用过JSF,所以我不确定你要听哪个事件(onclick我会假设)。 Generically speaking, this should work. 一般来说,这应该工作。
var element = document.getElementById('commandButtonAcceptDraft');
element.onclick = function(e){
return confirm('Are you sure etc...');
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.