Calling a managed bean method when some button is clicked

Question

I am new to JSF and want to have a button, which when clicked, will call a method of the backing bean. Is this possible or I have to use AJAX or something? I tried things like

<button onclick="#{myManagedBean.myMethod()}">MyButton</button>

But they didn't work. What's the normal way of doing it?

Edit:
That button is created by JqueryUI, and I am unable to change the button's type to commandButton. I am able to do only two customizations-
1. call javascript functions from that button
2. change the target of the form (inside which the button resides)
So, how can I call the backing bean method from these two ways, like from Javascript or on form submit?

Answer 1

Actually, Adarsh already answer very well, what I want to add here is an optional choice to calling the JSF backing bean function with jQuery, which is also convenient and you can add more complex logic when click button with help of jQuery.

You can use JSF h:commandButton, additionally, you can add an action attribute in element which calling your JSF backing bean function.

E.g <h:commandButton value="Update" id="update" action="#{myPageBean.updateMyPage}"></h:commandButton>

You may already notice the onClick() or similar event not shown in above example, actually this part job will handle by jQuery as event handling and process.

E.g Find your button with var updateButton = $(document.getElementById("myPage:update")); or var updateButton = $(#"myPage\\:update")); Then register click event on your button with jQuery click() function as updateButton.click(function() {...do whatever you want here...});

The final effect should be when you click your JSF page button, it will call JSF backing bean method as updateMyPage, hope it will help you.

Answer 2

you have to use jsf command button component

<h:commandButton value="MyButton" action="#{myManagedBean.myMethod()}"></h:commandButton>

Answer 3

In JSF you have action parameter for the JSF componenents which can be bound to a method in your managed bean. using this method binding you can invoke the method of your managed bean.

<h:commandButton value="click" action="#{managedbean.method}"/>

Answer 4

onClick is used to invoke a client-side scripting function like java script. In order to invoke a method on the server side(backing bean), you need to use the action attribute of the commandButton component. JSF provides a component h:commandButton for this purpose. The syntax for using the commandButton to invoke a method in the backing bean is

 <h:commanButton value="button" action="#{myBean.methodName()}"/>

The method that you are invoking should be of the form String methodName(), where the String value returned represents the outcome used by the navigation handler to determine what page to display next.

EDIT:

In order to call a backing bean method from your button, use the onClick attribute of your button to call a javascript function. You would need to create a hidden button in your form which invokes the required backing bean method. In the javascript function, use the below code to click the hidden button and thereby invoke the backing bean method.

  document.getElementById('form:button').click();