Commandlink with ajax works only on second click

Question

What I'm trying to do is just a simple logout function. The main page will call a template page; consist of header and content. The header contains the logout button. There will be 2 forms in the page, one in the header (logout button), one in the content (few buttons,links, etc).

My problem is the page refresh when first click on the logout link and only proceed after second click. The problem starts to appear when I include primefaces or ajax code inside the content form. When I remove that particular code, the logout works as intended.

The logout form in main template templateUser.xhtml:

<h:form id="logout">
    <h:commandLink action="#{tenantController.customLogout(e)}"
        id="logoutBtn" immediate="true" value="Logout" />
</h:form>

The backing bean:

public String customLogout(ActionEvent e) {
    return "login.xhtml";
}

FYI: the customLogout method also consist of session destroy, but I just put page redirect here.

In template client, the template is specified as:

<ui:composition template="/templateUser.xhtml">

As for the JSF library, currently use jsf 2.0

Solutions I've tried:

• immediate="true"
• put id for both form and commandLink (template form & content form)
• use primefaces (<p:commandLink> with ajax false ==> this returb to the previous page; the method in backed bean is not running.

Below are few links I tried here:

• commandButton/commandLink/ajax action/listener method not invoked or input value not updated
• How can I prevent page refresh on click of <h:commandLInk>
• JSF PrimeFaces p:commandLink won't redirect to new page?

Answer 1

The problem starts to appear when I include primefaces or ajax code inside the content form. When I remove that particular code, the logout works as intended.

Your problem is caused by point 7 as described in commandButton/commandLink/ajax action/listener method not invoked or input value not updated. When you fire an ajax request using <f:ajax> and performs an update which also covers all other forms, then all those other forms will lose their view state. This causes that the 1st submit will always "do nothing", but the next submits will work, which matches exactly your problem symptoms.

You can solve this problem in one of the following ways:

1. Explicitly specify the client ID of all other forms in the <f:ajax render>. You can specify multiple client IDs space separated. E.g.

   <f:ajax ... render="someComponent otherComponent :loginForm" />
   

2. Use the JavaScript based fix as proposed in this answer: h:commandButton/h:commandLink does not work on first click, works only on second click.