How can I execute Javascript before a JSF action is performed?

Question

If you have a JSF <h:commandLink> (which uses the onclick event of an <a> to submit the current form), how do you execute JavaScript (such as asking for delete confirmation) prior to the action being performed?

@BalázsMáriaNémeth Would you please explain to me how they aren't? — user207421, Mar 20 '13 at 23:22
This question is about JSF the related question is not. The difference is, after the javascript code, in this case, we still want to trigger a server action, but in the related question is purely client side. — Jose Manuel Gomez Alvarez, May 17 '18 at 12:28
I have marked this question for reopening. While it is true that in both questions the answer is unsing the "onclick" property, since the target duplicate doesn't say that it applies to JSF too, a user redirected to that page would be confused. — Pablo, Jan 08 '19 at 09:05

score 14 · Answer 1 · answered Dec 27 '10 at 22:13

14

Can be simplified like this

onclick="return confirm('Are you sure?');"

answered Dec 27 '10 at 22:13

iordan

151
1
2

funny that `if` constructs are suggested in all posts below by developers with some experience.. and even more funny I'm learning from them :) – akostadinov Mar 07 '13 at 22:22

score 7 · Answer 2 · answered May 24 '11 at 16:07

7

This worked for me:

<h:commandButton title="#{bundle.NewPatient}" action="#{identifController.prepareCreate}"  
                                             id="newibutton" 
                                             onclick="if(confirm('#{bundle.NewPatient}?'))return true; else return false;" 
                                             value="#{bundle.NewPatient}"/>

answered May 24 '11 at 16:07

Hanynowsky

2,970
5
32
43

10

That can be simplified as `onclick="return confirm('Are you sure?')"`. It's unnecessary to check a boolean value to return a boolean value. Just return it directly. – BalusC May 24 '11 at 16:39
Is there an easy way in Primefaces to implement the above using `` instead? – Robert Aug 30 '17 at 08:48

score 7 · Accepted Answer · answered Sep 16 '08 at 15:33

<h:commandLink id="myCommandLink" action="#{myPageCode.doDelete}">
    <h:outputText value="#{msgs.deleteText}" />
</h:commandLink>
<script type="text/javascript">
if (document.getElementById) {
    var commandLink = document.getElementById('<c:out value="${myPageCode.myCommandLinkClientId}" />');
    if (commandLink && commandLink.onclick) {
        var commandLinkOnclick = commandLink.onclick;
        commandLink.onclick = function() {
            var result = confirm('Do you really want to <c:out value="${msgs.deleteText}" />?');
            if (result) {
                return commandLinkOnclick();
            }
            return false;
        }
    }
}
</script>

Other Javascript actions (like validating form input etc) could be performed by replacing the call to confirm() with a call to another function.

score 1 · Answer 4 · answered Sep 16 '08 at 15:48

1

You can still use onclick. The JSF render kit specification (see Encode Behavior) describes how the link should handle it. Here is the important part (what it renders for onclick):

var a=function(){/*your onclick*/}; var b=function(){/*JSF onclick*/}; return (a()==false) ? false : b();

So your function wont be passed the event object (which isn't reliable cross browser anyway), but returning true/false will short-circuit the submission.

answered Sep 16 '08 at 15:48

noah

21,289
17
64
88

I am not able to add an onclick attribute to . I receive the following error: org.apache.jasper.compiler.CompileException: /MyPage.jsp(164,4) Attribute onclick invalid according to the specified TLD I have also seen a number of other people on forums requesting a solution like this. – Grant Wagner Sep 16 '08 at 16:32

score 0 · Answer 5 · 2011-01-09T15:34:40.713

var deleteClick;
var mess="xxx";
function assignDeleteClick(link) {
    if (link.onclick == confirmDelete) {
        return;
    }
    deleteClick = link.onclick;
    link.onclick = confirmDelete;
}


function confirmDelete() {
    var ans = confirm(mess);
    if (ans == true) {
        return deleteClick();
    } else {
        return false;
    }
}

use this code for jsf 1.1.

score 0 · Answer 6 · answered Feb 04 '09 at 09:37

0

This never worked for me,

 onclick="if(confirm('Are you sure?')) return false;" />

but this did

onclick="if(confirm(\"Are you sure?\"))return true; else return false;"

answered Feb 04 '09 at 09:37

I am not able to add an onclick attribute to . I receive the following error: org.apache.jasper.compiler.CompileException: /MyPage.jsp(164,4) Attribute onclick invalid according to the specified TLD I have also seen a number of other people on forums requesting a solution like this. – Grant Wagner Feb 04 '09 at 14:06
@grant-wagner, I realize it is a lot of years now but perhaps implementation you used at the time was broken – akostadinov Mar 07 '13 at 22:24

score 0 · Answer 7 · answered Sep 17 '08 at 11:20

In JSF 1.2 you can specify onclick events.

Also, other libraries such as MyFaces or IceFaces implement the "onclick" handler.

What you'd need to do then is simply:

<h:commandLink action="#{bean.action}" onclick="if(confirm('Are you sure?')) return false;" />

Note: you can't just do return confirm(...) as this will block the rest of the JavaScript in the onClick event from happening, which would effectively stop your action from happening no matter what the user returned!

score 0 · Answer 8 · answered Sep 17 '08 at 13:08

0

If you want to execute something before the form is posted, for confirmation for example, try the form event onSubmit. Something like:

myform.onsubmit = function(){confirm("really really sure?")};

answered Sep 17 '08 at 13:08

Victor

9,210
3
26
39

How can I execute Javascript before a JSF action is performed?

8 Answers8

Linked