Fatal编程技术网
  • ajax/
  • 使用h:selectone菜单f:ajax进行两次ajax更新

使用h:selectone菜单f:ajax进行两次ajax更新

ajax jsf

使用h:selectone菜单f:ajax进行两次ajax更新,ajax,jsf,Ajax,Jsf,简而言之，如果一个组件已经被Ajax更新，它就不能启动新的Ajax事件 我有三个h:SelectOne菜单：A、B和C。 当我在A中触发更改事件时，然后更新B h:SelectOne菜单。 当我在B中触发更改事件时，然后更新C h:SelectOne菜单 问题是当bh:selectOneMenu的内容被更新时，B中的ajax不起作用，C永远不能被更新 <h:selectOneMenu id="A" value="#{paqueteBean.mes}" label="a"> <f

简而言之，如果一个组件已经被Ajax更新，它就不能启动新的Ajax事件

我有三个h:SelectOne菜单：A、B和C。 当我在A中触发更改事件时，然后更新B h:SelectOne菜单。 当我在B中触发更改事件时，然后更新C h:SelectOne菜单

问题是当bh:selectOneMenu的内容被更新时，B中的ajax不起作用，C永远不能被更新

<h:selectOneMenu id="A" value="#{paqueteBean.mes}" label="a">
<f:selectItem itemLabel="Seleccione..." itemValue="" />
<f:selectItem itemLabel="Enero" itemValue="ENERO" />
<f:selectItem itemLabel="Febrero" itemValue="FEBRERO" />
<f:ajax listener="#{paqueteBean.changeMes}" render="B" />
</h:selectOneMenu>

<h:selectOneMenu id="B" value="#{paqueteBean.origen}" label="b">
<f:selectItem itemLabel="Seleccione..." itemValue="" />
<f:selectItems value="#{paqueteBean.origenes}" />
<f:ajax listener="#{paqueteBean.changeOrigen}" render="C"/>
</h:selectOneMenu>

<h:selectOneMenu id="C" value="#{paqueteBean.zona}" label="c">
<f:selectItem itemLabel="Seleccione..." itemValue="" />
<f:selectItems value="#{paqueteBean.zonas}" />
</h:selectOneMenu>
ajax响应很好，但在更新后根本不起作用：

<?xml version='1.0' encoding='UTF-8'?>
<partial-response id="j_id1"><changes><update id="B"><![CDATA[<select id="B" name="b" size="1" onchange="mojarra.ab(this,event,'valueChange','@this','C')"> <option value="">Seleccione...</option>
    <option value="BUE">Ezeiza o Aeroparque</option>
</select>]]></update><update id="j_id1:javax.faces.ViewState:0"><![CDATA[-2984590031183218074:6198891110668113457]]></update></changes></partial-response>
更新

对于PrimeFaces，我有同样的行为：

<h:form id="filtro">
<p:selectOneMenu id="A" value="#{paqueteBean.mes}">
    <f:selectItem itemLabel="Seleccione..." itemValue="" />
    <f:selectItem itemLabel="Enero" itemValue="ENERO" />
    <f:selectItem itemLabel="Febrero" itemValue="FEBRERO" />
    <f:selectItem itemLabel="Marzo" itemValue="MARZO" />
    <p:ajax listener="#{paqueteBean.changeMes}" update="B" />
</p:selectOneMenu>

<p:selectOneMenu id="B" value="#{paqueteBean.origen}"
    disabled="#{empty paqueteBean.mes}">
    <f:selectItem itemLabel="Seleccione..." itemValue="" />
    <f:selectItems value="#{paqueteBean.origenes}" />
    <p:ajax listener="#{paqueteBean.changeOrigen}" update="C"
        process="origen mesSalida" />
</p:selectOneMenu>

<p:selectOneMenu id="C" value="#{paqueteBean.zona}"
    disabled="#{empty paqueteBean.mes or empty paqueteBean.origen}">
    <f:selectItem itemLabel="Seleccione..." itemValue="" />
    <f:selectItems value="#{paqueteBean.zonas}" />
</p:selectOneMenu>
当我更改一些A值时，启动backingbean中的方法，但当我更改一些B值时，不会启动backingbean中的方法

最奇怪的是，对于ajax更新之前存在于B中的项，调用了backingbean

背豆，没什么特别的：

    public void changeMes(){
    logger.debug("en changeMes el Mes es: " + this.mes);

    this.origenes = new HashMap<String, String>();
    this.origenes.put("Ezeiza o Aeroparque", "BUE");
}

public void changeOrigen(){
    logger.debug("Mes: " + this.mes);
    logger.debug("Origen" + this.origen);

    this.zonas = new HashMap<String, String>();
    this.zonas.put("Argentina", "AR");
    this.zonas.put("Brasil", "BR");
}

public void changeZona(){
    logger.debug("Mes: " + this.mes);
    logger.debug("Origen" + this.origen);
    logger.debug("Zona" + this.zona);

    this.destinos = new HashMap<>();
    this.destinos.put("Mar del Plata", "MDQ");
    this.destinos.put("Punta Lara", "LTA");
}
除了使用，您还可以使用PrimeFaces Ajax元素，它为您提供了更新属性：

<p:ajax update="elementID"/>
我可以推荐的另一种可能性是：您是否尝试过将SelectOneMenu放入-Element中？看起来你没有使用表单。这样做，您就可以随时更新表单以更改菜单。在我的项目中对我很有帮助

更新：

以下是一个工作示例：

豆子：

XHTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
<h:head>
    <meta charset="UTF-8" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Test</title>    
</h:head>
<body>
<f:view> 
<h:form id="dataForm">
<h:selectOneMenu value="#{myBean.selectedA}" style="width: 100%;">
    <f:selectItems value="#{myBean.aItems}" /> 
    <f:ajax execute="@form" render="@form" listener="#{myBean.selectA}" />
</h:selectOneMenu>

<h:selectOneMenu disabled="#{myBean.bDisabled}" value="#{myBean.selectedB}" style="width: 100%;">
    <f:selectItems value="#{myBean.bItems}" /> 
    <f:ajax execute="@form" render="@form" listener="#{myBean.selectB}" />
</h:selectOneMenu>

<h:selectOneMenu disabled="#{myBean.cDisabled}" value="#{myBean.selectedC}" style="width: 100%;">
    <f:selectItems value="#{myBean.cItems}" /> 
    <f:ajax execute="@form" render="@form" listener="#{myBean.selectC}" />
</h:selectOneMenu>

</h:form>
</f:view>
</body>
</html>
我也犯了同样的错误。 对于第二个SelectOne菜单，我错过了一个setter。 在您的代码中，它是myBean.selectedB的setter。
检查所有的getter和setter。可能有问题

B项是A的子项，C项是B的子项？例如Country->City…等等？所以，基本上，A的所选项目被B的可能结果过滤使用，de B内容到C内容也是如此。是的，我有一个h:form，我尝试使用@this或组件ID执行，支持Bean看起来像这样。第一个方法changeMes被调用。如果我在B h:selectOneMenu中添加a，当我从Selectione更改时。。。另一方面，backingbean中的changeOrigen方法也会被调用，但是如果我使用自动创建的一个项，backingbean中的方法不会被触发：对不起，我不明白你的意思，但是你会更新你的问题并发布你bean中更新的部分吗methods@Sodero：我更新了我的答案，只要按原样试一下，如果有效，然后根据你的意愿改变它。如果它解决了您的问题，请将其标记为已接受！这是一个很好的例子，很有效。现在，尝试更改@RequestScope的@SessionScoped，一次只升级一个组件time@Sodero：如果一个bean是requestscope的，这意味着，通过对其属性的每次调用，这个bean将被创建。另外，如果您选择A1，这将重置bean，重置bean意味着B再次被禁用，尽管您将其视为已启用，但实际上它已被禁用，因此选择B将不起作用，因为它已被禁用。您必须使用SessionScoped或ViewScoped Bean。它不会与RequestScope一起工作，它会导致一个相当自我解释的异常。 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
<h:head>
    <meta charset="UTF-8" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Test</title>    
</h:head>
<body>
<f:view> 
<h:form id="dataForm">
<h:selectOneMenu value="#{myBean.selectedA}" style="width: 100%;">
    <f:selectItems value="#{myBean.aItems}" /> 
    <f:ajax execute="@form" render="@form" listener="#{myBean.selectA}" />
</h:selectOneMenu>

<h:selectOneMenu disabled="#{myBean.bDisabled}" value="#{myBean.selectedB}" style="width: 100%;">
    <f:selectItems value="#{myBean.bItems}" /> 
    <f:ajax execute="@form" render="@form" listener="#{myBean.selectB}" />
</h:selectOneMenu>

<h:selectOneMenu disabled="#{myBean.cDisabled}" value="#{myBean.selectedC}" style="width: 100%;">
    <f:selectItems value="#{myBean.cItems}" /> 
    <f:ajax execute="@form" render="@form" listener="#{myBean.selectC}" />
</h:selectOneMenu>

</h:form>
</f:view>
</body>
</html>