mask jquery currency

Question

In my xhtml I have 2 input value 1 and 2.

The first input works perfectly the jquery mask for currency. More in the 2 input that is in a modal the coin mask is not working.

coin function

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

$(document).ready(function() {
    configurarMoeda();
});

My xhtml

<ui:define name="content">

    <h1 class="aw-page-title">Armas</h1>

    <div style="width: 80%; margin: 0 auto;">
        <h:form id="frm">
            <p:messages id="msgs" escape="true" closable="true" />

            <p:toolbar id="toolbar">
                <f:facet name="right">
                    <p:commandButton value="Novo" icon="fa  fa-file-text" alt="Novo"
                        title="Novo" action="#{armaBean.novo}" process="@this"
                        update="dialog_arma" oncomplete="PF('edicaoArmaDialog').show()">
                        <p:resetInput target="dialog_arma" />

                    </p:commandButton>
                </f:facet>
            </p:toolbar>

            <p:outputLabel value="Valor 1 " for="moeda" />
            <p:inputText id="moeda" styleClass="moeda" label="Valor" maxlength="10"
                value="#{armaBean.arma.valor}" />
        </h:form>
    </div>

    <p:dialog widgetVar="edicaoArmaDialog" id="dialog_arma"
        resizable="false" modal="true" closeOnEscape="true" responsive="true"
        appendTo="@(body)" header="Cadastro de Armas">

        <h:form id="frm_dialog">

            <h:inputHidden id="id_arma" value="#{armaBean.arma.idArma}" />

            <h:panelGrid id="painel_edicao_dialog" layout="block"
                styleClass="ui-fluid">

                <p:panelGrid layout="grid" columns="2"
                    styleClass="panelgrid-noborder"
                    columnClasses="ui-grid-col-3, ui-grid-col-9">

                    <p:outputLabel value="Valor 2" for="moeda" />
                    <p:inputText id="moeda" styleClass="moeda" label="Valor"
                        maxlength="10" value="#{armaBean.arma.valor}">
                    </p:inputText>

                </p:panelGrid>

            </h:panelGrid>

        </h:form>

    </p:dialog>


</ui:define>

Answer 1

Speaks my dear,

I am input this way to stay as BRL currency in my project. Maybe it works for you.

<p:inputText id="valorParcela"
             value="#{clientebean.selectedEmprestimo.valorParcela}">

                        <p:ajax event="keyup" />
                        <f:convertNumber maxFractionDigits="2" currencyCode="BRL"
                            type="currency" />

</p:inputText>

Answer 2

Guys I managed to solve my problem, the solution was I put javascript inside the p:dialog

<p:dialog widgetVar="edicaoArmaDialog" id="dialog_arma"
        resizable="false" modal="true" closeOnEscape="true" responsive="true"
        appendTo="@(body)" header="Cadastro de Armas">

        <h:form id="frm_dialog">

            <p:messages id="msgs_dialog" />
            <p:defaultCommand target="btn_salvar" scope="dialog_arma" />
            <h:inputHidden id="id_arma" value="#{armaBean.arma.idArma}" />

            <h:outputScript>

            function configurarMoeda() {

                 $(".valor").maskMoney({thousands:'.', decimal:',',allowZero:"true"});
             }

             $(document).ready(function() {
                configurarMoeda();
             });
        </h:outputScript>

            <h:panelGrid id="painel_edicao_dialog" layout="block"
                styleClass="ui-fluid">

                <p:panelGrid layout="grid" columns="2"
                    styleClass="panelgrid-noborder"
                    columnClasses="ui-grid-col-3, ui-grid-col-9">
                    <p:outputLabel value="Descrição" for="desc" />
                    <p:inputText id="desc" label="Descrição" maxlength="60" size="30"
                        required="true" onkeyup="alteraMaiusculo()"
                        requiredMessage="O campo descrição da arma é obrigatório."
                        value="#{armaBean.arma.descricao}" />

                    <p:outputLabel value="Sigla" for="sig" />
                    <p:inputText id="sig" label="Sigla" maxlength="30" size="20"
                        required="true" onkeyup="alteraMaiusculo()"
                        requiredMessage="O campo sigla da arma é obrigatório."
                        value="#{armaBean.arma.sigla}" />

                    <p:outputLabel value="Valor" for="valor" />
                    <p:inputText id="valor" styleClass="valor" label="Valor"
                        maxlength="10" value="#{armaBean.arma.valor}">
                        <f:converter converterId="convertToBigDecimal" />
                    </p:inputText>

                </p:panelGrid>

            </h:panelGrid>

            <br />

            <p:separator />
            <p:outputPanel
                style="margin: 20px 0px 20px 0px; width: 100%; display: table;">
                <p:commandButton id="btn_salvar" value="Salvar" icon="fa  fa-check"
                    action="#{armaBean.salvar}" process="dialog_arma"
                    update="msgs_dialog painel_edicao_dialog"
                    oncomplete="if(!args.validationFailed) PF('edicaoArmaDialog').hide()"
                    style="float: right; width: 100px;" />
            </p:outputPanel>

        </h:form>

    </p:dialog>

Answer 3

I believe that p: is of primefaces, so use the Primefaces Extension, to do this, it has a component called pe:inputNumber that has attributes for the field mask!