How to call JSF managed bean method using javascript. p:remotecommand example

Do you need to call JSF managed bean method using javascript?. Then you can use primefaces <p:remoteCommand/>. In this tutorial, let us see how to call JSF managed bean method from javascript. This tutorial also covers how to pass additional parameters to the bean method using javascript. In General, JSF backing bean/managed bean method is called by command button action/actionListner attribute. Now let us see how to call bean method with primefaces remoteCommand tag using javascript.  In this example, I have created a maven  project (JSF2Demo) in eclipse.

jsf remote command

pom.xml:

 

Now We will see two examples using p:remoteCommand

1. Simply calling managed bean method using javascript when the JSF page loads.

When we  use remoteCommand tag, JSF creates a javascript function ( i.e. in our example callRemoteMethod) that matches the name of remoteCommand tag. Now we need to call this function from script which calls the bean method.

2. In the second example, managed bean method is called with additional parameters using client side script on click event. Let us see an example of simple user registration page having two command buttons.

in JavaScript, write the below function. In this example, I have created script.js with the below code and placed the js file  under the webapp/resources/js folder.

In the above JSF page, both command buttons call the same bean method called verify. The second button (Verify by Mobile) calls the javascript function verifyByMobile() that calls sendOtp() function which calls the bean method (verify )with aditional parameter “OTP“.

The UserBean class code is given below.

Reference : PrimeFaces remoteCommand tag

You may also like

Leave a Reply