CODEWITHSUNDEEP
javaajaxjsfrendering
Kalithae
Kalithae

Reputation: 21

How to make jsf change what is rendering after button press using f:ajax?

I'm confused with rendering and not rendering.

First, I need to have a login-password input and a button to log in. Then, if the login-password checks out, I need to hide all the input fields and the "Enter" button, and display another button to navigate to another page.

What is the best way to do this?

Here's what I have so far. 

<h:form>
  <table>
    <h:panelGroup>
      <tr><td>Username : </td><td><h:inputText value="#{loginBean.username}"/></td></tr>
      <tr><td>Password : </td><td><h:inputSecret value="#{loginBean.password}"/></td></tr>
      <tr><td colspan="2">
        <h:commandButton value="Enter" action="#{loginBean.login}">
          <f:ajax event="change"  render="loggedin" listener="#{loginBean.handleEvent}" />
        </h:commandButton>
      </td></tr>
    </h:panelGroup>
    <tr><td colspan="2">
      <h:commandButton rendered="loginBean.login = false" id="loggedin" value="Go to the special page" action="logingo.xhtml"/>
    </td></tr>
  </table>
</h:form>

The loginBean is really simple for testing: 

@Named(value = "loginBean")
@ManagedBean
@ViewScoped

public class LoginBean {

    public boolean result;
    private String username = "";
    private String password = "";
    public boolean output;

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public Boolean getOutput() {
        return output;
    }

    public void setoutput(String password) {
        this.output = output;
    }

    public void handleEvent(AjaxBehaviorEvent event) {
       if (result == true){ 
          output = true;
       }
       else output = false;
    }

    public boolean getResult() {
        return result;
    }

    public void setResult(String username) {
        this.result = result;
    }

    public void login() {
        if (this.username.isEmpty() == false && this.username.equalsIgnoreCase("11111")
                && this.password.isEmpty() == false && this.password.equals("11111")) {
            result = true;
        }
        result = false;
    }

Upvotes: 2

Views: 1585

Answers (1)

Josef E.
Josef E.

Reputation: 2219

You are on the right track with the rendered attribute. However your syntax is a little off.

It should look like this:

rendered="#{loginBean.login}"

When using this, that will render if login returns true and if you want the the condition to check false, try this:

rendered="#{!loginBean.login}"

Hope that helps! :)

Upvotes: 1

Related Questions