jsf ajax conditional rendering not working

StackOverflow https://stackoverflow.com/questions/20843110

  •  22-09-2022
  •  | 
  •  

Pergunta

I have form with selectonemenu with selectitems "D" and "F", and I want to render some other elements like h:outputtext and h:inputtext, whene "D" is selected, and hide them when "F" is selected, I've followed this question, and tried to make it the same for my case, but for some reason, page does not react to change of selection in seleconemenu

my view.xhtml:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:a4j="http://richfaces.org/a4j">
<h:head>
    <meta charset="utf-8" />
    <title>New item</title>

    <link rel="stylesheet" href="style.css" />
</h:head>
<h:body>
    <div id="wrapper">
        <header>
                <ul>
                    <li><h:outputLink value="index.xhtml">main</h:outputLink></li>
                    <li><h:outputLink value="reservations.xhtml">reservations</h:outputLink></li>
                    <li><h:outputLink value="items.xhtml">items</h:outputLink></li>
                    <li><h:outputLink value="revenue.xhtml">revenue</h:outputLink></li>
                    <li><h:outputLink value="statistics.xhtml">statistics</h:outputLink></li>
                </ul>
        </header>
        <div id="content">
            <div id="inner">
                <h:form  prependId="false">                 
                    <h:outputText value="Type:" />
                    <h:selectOneMenu id="type" value="#{newItemMB.type}">
                        <f:selectItem itemLabel="" itemValue="#{null}" noSelectionOption="true"/>
                        <f:selectItem itemLabel="Drink" itemValue="D" />
                        <f:selectItem itemLabel="Food" itemValue="F" />
                        <f:ajax execute="@form" render="selectInputPanel"/>
                    </h:selectOneMenu>
                        <h:outputText value="Name:" />
                        <h:inputText id="name" label="name">
                            <f:validateLength minimum="1"  maximum="100" />
                        </h:inputText>
                        <h:outputText value="Price:" />
                        <h:inputText id="price" label="price">
                            <f:validateLength minimum="1"  maximum="50" />
                        </h:inputText>
                    <h:panelGroup id="selectInputPanel">
                        <h:outputText rendered="#{newItemMB.isTypeD}" value="Size:" />
                        <h:inputText id="size" label="size" rendered="#{newItemMB.isTypeD}" />
                    </h:panelGroup>
                </h:form>
            </div>
        </div>      
        <footer>
            <h:outputText value="asd"></h:outputText>
        </footer>
    </div>
</h:body> 
</html>

my controller:

package managedBeans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class NewItemMB {

    private String type = "D";
    private String name;
    private int price;

    public Boolean getIsTypeD()
    {
        if(type.equals("D"))
        {
            System.out.println(type+":true");
            return true;
        }
        else
        {
            System.out.println(type+":false");
            return false;
        }
    }

    public String getType() {
        return type;
    }
    public void setType(String type) {
        this.type = type;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getPrice() {
        return price;
    }
    public void setPrice(int price) {
        this.price = price;
    }   
}

Am I doing something wrong?

Foi útil?

Solução

Your type is not set at all, so it will always be "D".
Even when I change the selectonemenu.
You may check it yourself by using System.out.println in the setter function.

You need to specify when to activate the <f:ajax>.

What's more, execute attribute is to submit the information, so if you didn't type anything and select Food option, the validation will failed and thus the backing bean will not executed.
If you try typing something in Name and Price field and select Food, you will find the Size field disappear.

So, use event and delete execute.
Like this： 

<f:ajax event="change" render="selectInputPanel"/>

I tried it and it works.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top