3

Saudação para todos,

vou logo direto ao assunto;

Quando eu entro na pagina eu preencho um formulário e o campo de valor fica com a formatação de moeda funcionando, como podem ver a baixo;

inserir a descrição da imagem aqui

Depois que salvo a formatação de moeda não funciona mais, a não ser que eu faça um refresh na pagina apertando a tecla F5.

inserir a descrição da imagem aqui

Como faço para corrigir isso?

Meu projeto esta usando a abordagem de templates, na pagina pai a pagina se encontra assim;

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:p="http://primefaces.org/ui">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title><ui:insert name="titulo">Sistema de Pedidos de Venda</ui:insert></title>
        <h:outputStylesheet library="css" name="sistema.css" />
        <h:outputScript library="js" name="jquery.maskMoney.js"/>
    </h:head>

    <h:body>
        <p:ajaxStatus styleClass="ajax-status">
            <f:facet name="start">
                <h:graphicImage library="images" name="loading.gif"/>
            </f:facet>
            <f:facet name="complete">
                <h:outputText value=""/>
            </f:facet>
        </p:ajaxStatus>

        <header>


            <div style="float: right; margin-right: 110px">
                <span style="float: left; height: 30px; line-height: 30px; margin-right: 60px">

                </span>

        <h:form style="display: inline-block">
            <p:menubar styleClass="menu-sistema">
                <p:submenu label="Cadastros">
                    <p:menuitem value="Cadastro de Produto"  outcome="/produto/cadastro/CadastroProduto"/>


                </p:submenu>
                <p:submenu label="Pesquisa">
                    <p:menuitem value="Pesquisa de Usuarios" />

                </p:submenu>
                <p:menuitem value="Sair"  />
            </p:menubar>
        </h:form>
    </div>
    <div style="clear: both"></div>
    </header>
    <div id="conteudo">
        <ui:insert name="corpo" />
    </div>

    <p:separator style="margin-top: 20px" />

    <footer> Sistema Desenvolvido por Wladimir Bandeira, contato -
    [email protected] </footer>



        <script>
            function configurarMoeda() {
                $(".moeda").maskMoney({ decimal: ",", thousands: ".", allowZero: true });
            }

            $(document).ready(function() {
                configurarMoeda();
            });
        </script>


</h:body>

</html>

Essa é a pagina em questão;

<ui:composition template="/WEB-INF/template/LayoutPadrao.xhtml"
    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:p="http://primefaces.org/ui" xmlns:o="http://omnifaces.org/ui">

    <ui:define name="titulo">Novo Usuario</ui:define>


    <ui:define name="corpo">

        <h:form>

            <h1>Novo Produto</h1>

            <p:messages autoUpdate="true" closable="true" />

            <p:toolbar style="margin-top: 20px">
                <p:toolbarGroup>
                    <p:button value="Novo" />
                    <p:commandButton value="Salvar" id="botaoSalvar"
                        action="#{cadastroProdutoBean.salvar}" update="@form" />
                </p:toolbarGroup>
                <p:toolbarGroup align="right">
                    <p:button value="Pesquisa" />
                </p:toolbarGroup>
            </p:toolbar>

            <p:panelGrid columns="2" id="painel"
                style="width: 100%; margin-top: 20px" columnClasses="rotulo, campo">

                <p:outputLabel value="Nome do Produto" for="nomep" />
                <p:inputText id="nomep" size="60" maxlength="90"
                    value="#{cadastroProdutoBean.produto.nomeproduto}" />

                <p:outputLabel value="Descrição do Produto" for="descp" />
                <p:inputText id="descp" size="120" maxlength="130"
                    value="#{cadastroProdutoBean.produto.descproduto}" />

                <p:outputLabel value="Valor do Produto" for="valorp" />
                <p:inputText id="valorp" size="9" maxlength="9"
                    value="#{cadastroProdutoBean.produto.valorproduto}"
                    styleClass="moeda">
                    <f:convertNumber maxFractionDigits="2" minFractionDigits="2" />
                </p:inputText>



                <p:outputLabel value="Imagem do Produto" for="imagemp" />
                <p:inputText id="imagemp" size="60" maxlength="60"
                    value="#{cadastroProdutoBean.produto.imagemproduto}" />



            </p:panelGrid>
        </h:form>
    </ui:define>
</ui:composition>

E esse é a parte do código da pagina que está com problema;

        <p:outputLabel value="Valor do Produto" for="valorp" />
        <p:inputText id="valorp" size="9" maxlength="9"
            value="#{cadastroProdutoBean.produto.valorproduto}"
            styleClass="moeda">
            <f:convertNumber maxFractionDigits="2" minFractionDigits="2" />
        </p:inputText>

Acredito que seja uma boubagem.

Criei projeto Web Java que está utilizando JSF + CDI + Maven + JPA

3
  • Não ajudou muito, mas se você tiver mais uma sugestão eu vou agradecer.
    – user10264
    Commented 10/12/2015 às 18:28
  • você conseguiu entender meu problema?
    – user10264
    Commented 10/12/2015 às 18:29
  • Mas agora que você entendeu meu problema sabe como poder me ajudar?
    – user10264
    Commented 10/12/2015 às 19:09

1 Resposta 1

2

A máscara é aplicada toda vez que ocorrer um determinado evento no campo. Quando você digita o valor, a mascara é aplicada. Por estar ocorrendo vários eventos de entrada, toda vez que você recarregar a página e atribuir o valor para o campo, a função não reconhecerá nenhum dos eventos que a farão aplicar a máscara.

Na documentação mostra uma maneira de fazer a máscara ser aplicada neste caso.

$(document).ready(function() {
  $("#text").maskMoney();
  $("#text").val(10000);

  // Defini a mascara no campo.
  $('#text').maskMoney('mask');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>

<input id="text">
<button id="refresh">refresh</button>

Referência: maskMoney Github

2
  • Então, fiz uma edição na resposta, porque achei que tinha um trecho meio confuso, mas não tenho certeza se não alterei o sentido. Dá uma olhada aí, e qualquer coisa reverte... +1 btw
    – gustavox
    Commented 10/12/2015 às 21:01
  • 1
    @gustavox ficou ótimo, obrigado pela colaboração. Commented 11/12/2015 às 17:20

Você deve fazer log-in para responder a esta pergunta.