JSF - How do I implement a JavaScript "Are you sure?" prompt for a

Question

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.

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?

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

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

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

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

score 31 · Accepted Answer · answered Nov 10 '10 at 20:41

31

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

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

answered Nov 10 '10 at 20:41

BalusC

1,082,665
372
3,610
3,555

@CoolBeans solution is correct in my case because otherwise the action reloads the page. I am using MyFaces and BootsFaces – MitchBroadhead Nov 30 '17 at 10:17
@MitchBroadhead Then the JSF impl or component library in question generates the onclick attribute in an incorrect way. Just look in generated HTML output and report issue to the responsible developer. – BalusC Nov 30 '17 at 11:25
1

i filed a bug over at BootsFaces and Stephan has fixed the problem now – MitchBroadhead Jan 21 '18 at 18:24

bmeding · Answer 2 · 2010-11-10T20:52:15.023

3

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

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

edited Nov 10 '10 at 20:52

answered Nov 10 '10 at 20:35

bmeding

617
7
14

there are advantages to adding your events in an external script rather than inline. This does work, but it wont be easily edited if you need to add it to a large number of items, or ever need to change the message in the future. – zzzzBov Nov 10 '10 at 21:04

score 2 · Answer 3 · answered Nov 10 '10 at 20:40

2

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

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

answered Nov 10 '10 at 20:40

CoolBeans

20,654
10
86
101

1

This is the correct solution in my case. @BalusC solution causes a reload of the page with MyFaces and BootsFaces. Not sure why. – MitchBroadhead Nov 30 '17 at 10:18

score 1 · Answer 4 · answered Nov 10 '10 at 20:25

1

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.

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

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

answered Nov 10 '10 at 20:25

zzzzBov

174,988
54
320
367

1

If you want to use javascript to getElementById, then I believe you will need to include the form name. In JSF the actual ID of the element will be something like 'formName:commandButtonAcceptDraft' – bmeding Nov 10 '10 at 20:42

JSF - How do I implement a JavaScript "Are you sure?" prompt for a

4 Answers4