jsf ajax条件渲染不起作用

时间:2013-12-30 16:07:38

标签: ajax jsf selectonemenu

我的selectonemenu表格有选择项“D”和“F”,我想渲染一些其他元素,如h:outputtext和h:inputtext,当选择“D”时,当“F”是“F”时隐藏它们选中后,我跟着this提问,并尝试对我的案例进行相同的处理,但出于某种原因,页面对seleconemenu中的选择更改没有反应

我的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>

我的控制员:

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;
    }   
}

我做错了吗?

1 个答案:

答案 0 :(得分:1)

您的type根本未设置,因此始终为“D” 即使我改变了selectonemenu 您可以在setter函数中使用System.out.println自行检查。

您需要指定何时激活<f:ajax>

此外,execute属性是提交信息,因此如果您没有输入任何内容并选择Food选项,则验证将失败,因此不会执行辅助bean。
如果您尝试在 名称 价格 字段中输入内容,请选择 食物 ,您会发现 尺寸 字段消失。

因此,请使用event并删除execute 像这样:

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

我尝试了它并且有效。