I'm trying to invoke an method to update an outputLabel after changing the value selected on my SelectOneMenu. I've already tried all the questions that was answered here, but it's not working. The method on my Managed Bean is not being invoked, I tried to print something on console and doesn't work. There's no Exceptions. I've found this answer
commandButton/commandLink/ajax action/listener method not invoked or input value not updated
but I don't know if I'm missing something, probably I've already checked all the adressed points in the answer.
My SelectOneMenu code is
<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>
The master template is using the <h:head> and the selectOneMenu is already inside a <h:form> component.
On my ManagedBean the following method should be invoked:
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;
}
}
I'm really worried about the way I'm trying to update the value that should be updated on my page, if the method is not being invoked, nothing I'm doing inside it would work.
I'm using Tomcat 8.0 and JSF 2.0 if it's relevant
@Edit1 I'm using a template, so I'm posting a relevant code from my template.
First, on the page where's the SelecteOneMenu is situated, I have the following code just to identify that I'm using template.
<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">
In the same page, I have
<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>
This is basically the construction from my page, other things are fine.
My template.xhtml is defined on this code:
<?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
I've found an interesting thing. I've tried to open on Chrome browser, and using the F12 to see the console, always when I tried to change the value from the SelectOneMenu, the console from browser shows the following error:
