Ajax不会从selectOneMenu valueChanged item

时间：2016-06-29 12:27:00

标签： ajax jsf jsf-2

我正在尝试在更改SelectOneMenu上选择的值后调用更新outputLabel的方法。我已经尝试过这里回答的所有问题，但它不起作用。我的Managed Bean上的方法没有被调用，我试图在控制台上打印一些东西并且不起作用。没有例外。我找到了这个答案

commandButton/commandLink/ajax action/listener method not invoked or input value not updated

但我不知道我是否遗漏了某些东西，可能我已经检查了答案中的所有贴图点。

我的SelectOneMenu代码是

<h:selectOneMenu id="creditos" value="#{comprarCreditoBean.quantidadeCreditos}" required="true" requiredMessage=" *Campo obrigatório!">

                            <f:selectItem itemLabel="Selecione uma opção" noSelectionOption="true"/>
                            <f:selectItem itemValue="30" itemLabel="30 Créditos" />
                            <f:selectItem itemValue="60" itemLabel="60 Créditos" />
                            <f:selectItem itemValue="90" itemLabel="90 Créditos" />
                            <f:selectItem itemValue="120" itemLabel="120 Créditos" />
                            <f:ajax event="change"
                                execute="formulario" 
                                render="valPagamento" 
                                listener="#{comprarCreditoBean.tratarMudancaCreditos}"/>

                    </h:selectOneMenu>
                        <br />
                    </h:panelGroup>
                    <h:message class="mensagens" for="creditos" />

                    <h:outputLabel value="Total a Pagar: "/>
                    <h:outputLabel id="valPagamento" value="#{comprarCreditoBean.valorPagamento}" required="true" requiredMessage=" *Campo obrigatório!">
                        <f:convertNumber currencySymbol="R$" type="currency"/>
                    </h:outputLabel>

主模板使用<h:head>，selectOneMenu已经在<h:form>组件中。

在我的ManagedBean上，应该调用以下方法：

public void tratarMudancaCreditos(AjaxBehaviorEvent evento){

    System.out.println("Hi");
    System.out.println(this.quantidadeCreditos);
    if(this.quantidadeCreditos == 30){
        this.valorPagamento = 1.0;
    }else if(this.quantidadeCreditos == 60){
        this.valorPagamento = 2.0;
    }else if(this.quantidadeCreditos == 90){
        this.valorPagamento = 3.0;
    }else if(this.quantidadeCreditos == 120) {
        this.valorPagamento = 4.0;
    }
}

我真的很担心我试图更新应该在我的页面上更新的值的方式，如果没有调用该方法，我在里面做的任何事都不会有效。

我正在使用Tomcat 8.0和JSF 2.0（如果它是相关的）

@ EDIT1 我正在使用模板，因此我将从模板中发布相关代码。

首先，在SelecteOneMenu所在的页面上，我有以下代码来识别我正在使用模板。

<ui:composition template="/Template.xhtml"
xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:b="http://bootsfaces.net/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"  
xmlns:h="http://java.sun.com/jsf/html" version="2.0">

在同一页面中，我有

<ui:define name="corpo-da-pagina">
<div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title"><span class="tituloPanel">Comprar Créditos</span></h3>
        </div>
        <div class="panel-body" align="center">
        <h:form id="formulario">
                <h:panelGrid columns="3">
                    <h:outputLabel value="Quantidade de Créditos (1 Minuto = 1 crédito): "/>
                    <h:panelGroup>
                        <h:selectOneMenu id="creditos" value="#{comprarCreditoBean.quantidadeCreditos}" required="true" requiredMessage=" *Campo obrigatório!">
                            <f:selectItem itemLabel="Selecione uma opção" noSelectionOption="true"/>
                            <f:selectItem itemValue="30" itemLabel="30 Créditos" />
                            <f:selectItem itemValue="60" itemLabel="60 Créditos" />
                            <f:selectItem itemValue="90" itemLabel="90 Créditos" />
                            <f:selectItem itemValue="120" itemLabel="120 Créditos" />
                            <f:ajax event="change"
                                execute="formulario" 
                                render="valPagamento" 
                                listener="#{comprarCreditoBean.tratarMudancaCreditos}"/>
                        </h:selectOneMenu>
                        <br />
                    </h:panelGroup>
                    <h:message class="mensagens" for="creditos" />

                    <h:outputLabel value="Total a Pagar: "/>
                    <h:outputLabel id="valPagamento" value="#{comprarCreditoBean.valorPagamento}" required="true" requiredMessage=" *Campo obrigatório!">
                        <f:convertNumber currencySymbol="R$" type="currency"/>
                    </h:outputLabel>
<h:commandButton class="btn btn-default" value="Comprar" action="#{comprarCreditoBean.efetuarCompra}"/>
                <h:button class="btn btn-default" value="Voltar" outcome="paginaPrincipal"/>    
        </h:form>

这基本上是我页面的构造，其他的都很好。

我的template.xhtml在此代码中定义：

<?xml version="1.0" encoding="ISO-8859-1" ?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:b="http://bootsfaces.net/ui"
    xmlns:h="http://java.sun.com/jsf/html" version="2.0">

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta name="viewport" content="width=device-width" />

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="resources/css/estilo.css" />
    <link rel="stylesheet" type="text/css" href="resources/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css" />

    <!-- JS -->
    <script src="resources/js/jquery.js"></script>
    <script src="resources/js/bootstrap.min.js"></script>

    <!-- Ícone Navegador -->
    <link href="resources/imagens/icone.png" rel="shortcut icon" type="image/x-icon" />

    <title>e-BlueCard</title>
</h:head>
<h:body>
    <f:view>
        <div id="header" align="center">
            <ui:include src="/menu.xhtml" />
        </div>

        <ui:insert name="corpo-da-pagina">Conteúdo</ui:insert>

        <div class="well well-sm" align="center">
            <div id="footer" align="center">
                <span id="rodape">2016. Análise e Desenvolvimento de Sistemas - e-blue Card. Todos os direitos reservados.</span>
            </div>
        </div>
    </f:view>
</h:body>

@Edit 2

我发现了一件有趣的事情。我试图在Chrome浏览器上打开，并使用F12查看控制台，总是当我尝试从SelectOneMenu更改值时，来自浏览器的控制台显示以下错误：

Error caught by Chrome

1 个答案:

答案 0 :(得分：0)

您应该将模板中的<jsp:root ...>替换为<html ...></html>，如此

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://xmlns.jcp.org/jsf/core"
  xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
  OTHER LIBRARIES HERE
  >

    <h:head>
        HEADER CONTENT HERE
    </h:head>
    <h:body>
        BODY CONTENT HERE
    </h:body>
</html>

以下链接可帮助您了解JSF templates

相关问题
最新问题