Javascript formatting problems with currency

Navigation
2

Greeting for all,

I'm going straight to the point;

When I enter the page I fill out a form and the value field gets the currency formatting working, as you can see below;

Aftersavingthecurrencyformattingdoesnotworkanymore,unlessIrefreshthepagebypressingtheF5key.

HowdoIfixthis?

Myprojectisusingthetemplatesapproach,inthepagepaithepageisthus;

<?xmlversion="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>

This is the page in question; 

<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>

And that's the part of the code on the page that has a problem; 

        <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>

I think it's a bouquet.

I created Java Web project using JSF + CDI + Maven + JPA

    
asked by anonymous 10.12.2015 / 19:09

1 answer

1

The mask is applied every time a particular event occurs in the field. When you enter the value, the mask is applied. Because there are several input events occurring every time you reload the page and assign the value to the field, the function will not recognize any of the events that will make it apply the mask.

The documentation shows a way to make the mask to be applied in this case. 

$(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><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>

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

Reference: maskMoney Github

    
10.12.2015 / 20:18
How to make array2 have the same relation between the indexes after the shuffle of array1 Validation of form php and ajax