How do i invoke a java script function when clicking on command button in prime faces

Question

My requirement is to validate Ui component values using java script function. i would like to invoke backing bean method, once the validation is successful. How can i make it possible this requirement using primefaces 2.2 and java script. Here is the sample piece of code that i am using:

<p:commandButton id="saveButton" value="#{msgs['button.save.label']}"
    image="ui-icon #{msgs['button.save.icon.class']}" 
    actionListener="#{testBean.saveValues}"/>

why javascript? validation is built in, for cross validation, there is a workaround. [Cross validation](http://stackoverflow.com/questions/6282466/jsf2-0-doesnt-support-cross-field-validation-is-there-a-workaround) — phanneman, Mar 27 '12 at 16:50
Somehow jsf messages are not displaying in primefaces dialog window. I am not sure, if there is any bug in 2.2 version. — Sydaiah, Mar 28 '12 at 13:58
Doing validation by JavaScript instead of using JSF builtin validation is a terribly bad idea. You need to ask a question how to fix the real problem instead of asking how to get a hack/workaround to work. — BalusC, Mar 29 '12 at 13:50

score 1 · Answer 1 · answered Mar 29 '12 at 13:13

If you want to stop your actionListenerfrom being executed just return false in your js function of the button

this button won't execute the actionListener

<p:commandButton id="saveButton" value="#{msgs['button.save.label']}"
image="ui-icon #{msgs['button.save.icon.class']}" 
actionListener="#{testBean.saveValues}" onclick="return false;"/>

this will...

    <p:commandButton id="saveButton" value="#{msgs['button.save.label']}"
image="ui-icon #{msgs['button.save.icon.class']}" 
actionListener="#{testBean.saveValues}" onclick="return true;"/>

instead of hard coded onclick call your js function onclick=myJsValidation() it all depends on the return value of the js function

score 0 · Answer 2 · answered Mar 29 '12 at 12:46

In error case of your saveValues:

FacesContext.getCurrentInstance().addMessage("ERROR_MESSAGE", new FacesMessage(FacesMessage.SEVERITY_INFO, "Error Message", "Error Message"));

In your xhtml, add update attribute for commandButton:

<p:growl id="growl_ID"/>
<p:commandButton value="Save" actionListener="#{testBean.saveValues}" update="growl_ID"/>

How do i invoke a java script function when clicking on command button in prime faces

2 Answers2