阿贾克斯取决于^ h的inputText：有条件地呈现H：selectOneMenu用于和h selectOneRadio选择 [英] Conditionally render h:selectOneMenu and h:inputText by ajax depending on h:selectOneRadio selection

问题描述

我有2单选按钮的形式：TYPE1和2型。如果TYPE1被选择，则一个下拉必须显示。如果2型被选中，则文本字段必须显示。

I have a form with 2 radio buttons: "type1" and "type2". If "type1" is chosen, then a dropdown must be displayed. If "type2" is chosen, then a textfield must be displayed.

下面是视图和控制器：

test.xtml

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:rich="http://richfaces.org/rich"
            xmlns:a4j="http://richfaces.org/a4j">


    <h:form>

        <h:selectOneRadio 
            id="type"
            label="Type"
            value="#{testBean.type}">
            <f:selectItem itemLabel="Type1" itemValue="type1" />
            <f:selectItem itemLabel="Type2" itemValue="type2" />
            <f:ajax execute="@all" render="selectBox inputBox"/>
        </h:selectOneRadio>

        <h:selectOneMenu
            id="selectBox"
            label="Service"
            value="#{testBean.service}"
            rendered="#{testBean.isType1}"
            style="width:285px">
            <f:selectItem itemLabel="Medium"  itemValue="medium" />
            <f:selectItem itemLabel="Basic"   itemValue="basic" />
            <f:selectItem itemLabel="Premium" itemValue="premium" />
        </h:selectOneMenu>
        <h:inputText 
            id="inputBox"
            size="50"
            value="#{testBean.custom}"
            rendered="#{!testBean.isType1}" />

    </h:form>

</ui:composition>

TestBean.java

package com.test.backing;

import java.io.Serializable;

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

@ManagedBean(name = "testBean")
@SessionScoped
public class TestBean implements Serializable
{
private static final long serialVersionUID = -4337084623546767911L;

private String type = "type1";
private String service;
private String custom;

public Boolean getIsType1()
{
    if(type.equals("type1"))
    {
        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 getService()
{
    return service;
}

public void setService(String service)
{
    this.service = service;
}

public String getCustom()
{
    return custom;
}

public void setCustom(String custom)
{
    this.custom = custom;
}

}

当我开始我的申请，我有以下我的标准输出：

When I start my application, I have the following in my stdout:

type1:true
type1:true
type1:true
type1:true
type1:true
type1:true

然而，在用户界面没有任何反应，当我选择另一种类型。这是怎么造成的，我该怎么解决呢？

However, nothing happens in the UI when I choose another type. How is this caused and how can I solve it?

推荐答案

尝试更换XHTML code具有以下code

Try to replace xhtml code with the following code

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:rich="http://richfaces.org/rich"
            xmlns:a4j="http://richfaces.org/a4j">

<h:head>

</h:head>

<h:form prependId="false">

    <h:selectOneRadio 
        id="type"
        label="Type"
        value="#{testBean.type}">
        <f:selectItem itemLabel="Type1" itemValue="type1" />
        <f:selectItem itemLabel="Type2" itemValue="type2" />
        <f:ajax execute="@all" render="selectInputPanel"/>
    </h:selectOneRadio>
    <h:panelGroup id="selectInputPanel">
    <h:selectOneMenu
        id="selectBox"
        label="Service"
        value="#{testBean.service}"
        rendered="#{testBean.isType1}"
        style="width:285px">
        <f:selectItem itemLabel="Medium"  itemValue="medium" />
        <f:selectItem itemLabel="Basic"   itemValue="basic" />
        <f:selectItem itemLabel="Premium" itemValue="premium" />
    </h:selectOneMenu>
    <h:inputText 
        id="inputBox"
        size="50"
        value="#{testBean.custom}"
        rendered="#{!testBean.isType1}" />
    </h:panelGroup>
</h:form></ui:composition>

在code主要问题是，

Main problem in your code is,

1. 在缺少高：头进口jsf.js这是需要JSF AJAX
2. 请换组件到panelGroup中所建议的@BaluC因为一旦该组件没有渲染（不是页面上的），然后就可以了阿贾克斯不会与它的ID的工作。

和有关的时间getIsType1（）方法调用数是由于呈现的属性，以获取更多信息检查@ Baluc的回答<一href="http://stackoverflow.com/questions/4281261/why-is-the-getter-called-so-many-times-by-the-rendered-attribute?lq=1">here

And regarding number of time getIsType1() method calling is due to the rendered attribute, for more information check @Baluc's answer here

这篇关于阿贾克斯取决于^ h的inputText：有条件地呈现H：selectOneMenu用于和h selectOneRadio选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！