How to invoke a bean action method using a link? The onclick does not work

Question

I'm trying to implement a list of users names which can be rearranged by clicking on UP or DOWN links.

<ul>
    <ui:repeat var="user" value="#{cc.attrs.value}">
        <li>
            #{user.name}
            <h:link outcome = "user" value = "left" onclick="#{accountController.moveDown}">
                <f:param name="id" value = "${user.id}" />
            </h:link>
        </li>

    </ui:repeat>
</ul>

The problem here is that it seems that I'm not using the onclick attribute correctly. What is the proper way for doing this?

---

Edit: Following your advices I placed all the links in a form:

<h:form>
        <ui:repeat value="#{cc.attrs.value}" var = "user">
        <div class = "user">
            <h:commandLink id = "Link1" value = "Up" binding = "#{accountController.ommandLink}" action = "#{accountController.moveUserUp}">
                <f:attribute name = "userId" value = "#{user.id}" />
            </h:commandLink>
            <h:commandLink id = "Link2" value = "Down" binding = "#{accountController.commandLink}" action = "#{accountController.moveUserDown}">
                <f:attribute name = "userId" value = "#{user.id}" />
            </h:commandLink>
            <h:commandLink id = "Link3" value = "Delete" binding = "#{accountController.commandLink}" action = "#{accountController.deleteUser}">
                <f:attribute name = "userId" value = "#{user.id}" />
            </h:commandLink>
    </div>
</h:form>

the Managed Bean:

private UIComponent commandLink;

public void moveUserUp(){
    Integer userId = (Integer)commandLink.getAttributes().get("userId");
    System.out.println("MOVE TAB LEFT :" + userId);
}

public void moveUserDown(){
    Integer userId = (Integer)commandLink.getAttributes().get("userId");
    System.out.println("MOVE TAB RIGHT: " + userId);
}

public void deleteUser(){
    Integer userId = (Integer)commandLink.getAttributes().get("userId");
    System.out.println("DELETE TAB: " + userId);
}

public UIComponent getCommandLink() {
    return commandLink;
}

public void setCommandLink(UIComponent commandLink) {
    this.commandLink = commandLink;
}

The communication between the command Link and the managed bean is working but in the UI only the last commandLink (close action) is displayed.

Answer 1

In order to invoke a bean action method on click of a link, you need <h:commandLink>. This must be enclosed in a <h:form>.

<h:form>
    <h:commandLink ... action="#{bean.action}" />
</h:form>

public String action() {
    // ...

    return "/other.xhtml";
}

In JSF, only the attributes which interpret the EL expression as a MethodExpression can be used to declare action methods. All other attributes are interpreted as ValueExpression and they are immediately executed when the HTML output is generated by JSF. This covers the onclick attribute, whose value should actually represent a JavaScript function.

In case you actually want to use a GET link, then move the action method to a <f:viewAction> in the target page. This will be invoked on page load of the target page.

<h:link ... outcome="/other.xhtml" />

<f:metadata>
    <f:viewAction action="#{bean.onload}" />
</f:metadata>

public void onload() {
    // ...
}

See also:

• When should I use h:outputLink instead of h:commandLink?
• How to send form input values and invoke a method in JSF bean
• How do I process GET query string URL parameters in backing bean on page load?
• How to navigate in JSF? How to make URL reflect current page (and not previous one)

---

Following your advices I placed all the links in a form

The communication between the command Link and the managed bean is working but in the UI only the last commandLink (close action) is displayed.

You should not bind multiple physically different components to one and same bean property. Also the <f:attribute> to pass arguments is hacky and not necessary anymore in JSF2. Assuming that you're using a Servlet 3.0 / EL 2.2 container (your question history confirms that you're using Glassfish 3), rather just pass the argument as method argument directly:

<h:commandLink id="Link1" value="Up" action="#{accountController.moveUserUp(user)}" />
<h:commandLink id="Link2" value="Down" action="#{accountController.moveUserDown(user)}" />
<h:commandLink id="Link3" value="Delete" action="#{accountController.deleteUser(user)}" />

with

public void moveUserUp(User user) {
    // ...
}

public void moveUserDown(User user) {
    // ...
}

public void deleteUser(User user) {
    // ...
}

See also:

• How does the 'binding' attribute work in JSF? When and how should it be used?
• Invoke direct methods or methods with arguments / variables / parameters in EL

Answer 2

The onclick attribute is used to invoke JavaScript function (client-side). It is be used when you want to attach a JavaScript click event hanlder.

"#{accountController.moveDown}" is a method-expression. And as the name suggests looks like accountController is a managed bean.

As the h:link doc says:

javax.el.ValueExpression (must evaluate to java.lang.String)

Can be a value expression that must ultimately evaluate to a string.

Javascript code executed when a pointer button is clicked over this element.

Update:

May be what you are looking for is h:commandLink. You can use the action attribute to invoke the backing bean method.

Answer 3

I have modified your code, let me know if this is what you are looking at achive

    <h:form>
        <a4j:outputPanel id="userList" ajaxRendered="false">
            <ui:repeat  value="#{manageUser.userList}" var="user">
                <div class="user">
                    <h:panelGrid columns="3">
                    <h:outputText value="#{user.userId} ---- #{user.userName} ---- " />

                    <a4j:commandLink id="LinkUp" value="Up" execute="@this" 
                        action="#{manageUser.moveUserUp}" limitRender="true" render="userList" >
                        <f:setPropertyActionListener value="#{user}" target="#{manageUser.user}" />
                    </a4j:commandLink>

                    <a4j:commandLink id="LinkDown" value="down"
                        action="#{manageUser.moveUserDown}" execute="@this" limitRender="true" render="userList" >
                        <f:setPropertyActionListener value="#{user}" target="#{manageUser.user}" />
                    </a4j:commandLink>
                    </h:panelGrid>
                </div>
            </ui:repeat>
        </a4j:outputPanel>      
        </h:form>

Managed Beans (ManageUser)


import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean(name="manageUser")
@ViewScoped
public class ManageUser  implements Serializable {

    /**
     * 
     */
    private static final long serialVersionUID = -5338764155023244249L;

    private List<UserBean> userList;

    private UserBean user;

    /**
     * @return the user
     */
    public UserBean getUser() {

        return user;
    }

    /**
     * @param user the user to set
     */
    public void setUser(UserBean user) {
        this.user = user;
    }


    /**
     * @return the userList
     */
    public List<UserBean> getUserList() {
        return userList;
    }

    /**
     * @param userList the userList to set
     */
    public void setUserList(List<UserBean> userList) {
        this.userList = userList;
    }

    public ManageUser() {
        UserBean user1= new UserBean();
        user1.setUserId("1");
        user1.setUserName("userName1");

        UserBean user2= new UserBean();
        user2.setUserId("2");
        user2.setUserName("userName2");

        UserBean user3= new UserBean();
        user3.setUserId("3");
        user3.setUserName("userName3");

        userList = new ArrayList<UserBean>();
        userList.add(user1);
        userList.add(user2);
        userList.add(user3);
    }

    public void moveUserDown(){

        if(user !=null){
            int indexObj= userList.indexOf(user);

            if(indexObj < userList.size()-1){
                UserBean tempUser=userList.get(indexObj+1);
                userList.set(indexObj+1, user);
                userList.set(indexObj, tempUser);

            }
        }
    }

    public void moveUserUp(){

        if(user !=null){
            int indexObj= userList.indexOf(user);

            if(indexObj > 0){
                UserBean tempUser=userList.get(indexObj-1);
                userList.set(indexObj-1, user);
                userList.set(indexObj, tempUser);

            }
        }
    }

}

UserBean
import java.io.Serializable;

public class UserBean  implements Serializable {



    /**
     * 
     */
    private static final long serialVersionUID = 3820279264217591645L;

    private String userName;

    private String userId;

    /**
     * @return the userName
     */
    public String getUserName() {
        return userName;
    }

    /**
     * @param userName the userName to set
     */
    public void setUserName(String userName) {
        this.userName = userName;
    }

    /**
     * @return the userId
     */
    public String getUserId() {
        return userId;
    }

    /**
     * @param userId the userId to set
     */
    public void setUserId(String userId) {
        this.userId = userId;
    }

}