JSF Ajax 条件渲染不起作用

我有带有选择项"D"和"F"的selectonemenu的表单，我想渲染一些其他元素，如h：outputtext和h：inputtext，当选择"D"时，并在选择"F"时隐藏它们，我遵循了这个问题，并试图使它对我的情况相同，但由于某种原因，页面对seleconemenu中的选择更改没有反应

我的观点.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;
    }   
}

我做错了什么吗？

您的type根本没有设置，因此它将始终为"D"。
即使我更改了一个菜单。
您可以使用 setter 函数中的 System.out.println 自行检查。

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

更重要的是，execute属性是提交信息，因此如果您没有键入任何内容并选择 Food 选项，验证将失败，因此不会执行支持豆。
如果您尝试在"名称和价格"字段中键入内容并选择"食物"，您会发现"大小"字段消失了。

因此，请使用 event 并删除execute .
喜欢这个：

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

我试过了，它有效。

相关内容

最新更新

热门标签：