Problems with Javascript Currency Formatting

Asked

Viewed 456 times

3

Greeting to all,

I’ll get right 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;

inserir a descrição da imagem aqui

After saving the currency formatting no longer works, unless I refresh the page by pressing the F5 key.

inserir a descrição da imagem aqui

How do I fix it?

My project is using the templates approach, on the parent page the page is like this;

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

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 page code that’s in trouble;

        <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 believe it’s a boubagem.

I created Java web project that is using JSF + CDI + Maven + JPA

javascript jsf-2.2

  • It didn’t help much, but if you have one more suggestion I’ll thank you.

  • you managed to understand my problem?

  • But now that you understand my problem you know how to help me?

1 answer

2

The mask is applied every time a certain event occurs in the field. When you enter the value, the mask is applied. Because multiple input events are 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.

In the documentation shows a way to make the mask 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>
<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>

Reference: maskMoney Github

  • So I did an edit on the answer, because I thought it was a bit confusing, but I’m not sure I didn’t change the meaning. Take a look there, and anything reverts... +1 btw

  • 1

    @Gustavox was great, thanks for the collaboration.

Browser other questions tagged javascript jsf-2.2

You are not signed in. Login or sign up in order to post.