Then Inputtext lost mask when Edit information, what´s wrong?

Question

I need show the mask in InputText field after click in hiperlink for Edit information in my FORM. When I access the form in first time the inputext fields show me the masks correctly.

Follow my code:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>

    <label for="inputcpf">CPF</label>
    <h:inputText class="form-control" required="false" value="#{clienteBean.cliente.cpf}" id="inputcpf" requiredMessage="Informe o CPF do cliente." pl:placeholder="Informe o CPF" />        

    <script type="text/javascript">
      $("#inputcpf").mask("999.999.999-99");
    </script>

And the EDIT part of code:

    <p:column style="width:260px;" headerText="Nome" >
      <f:ajax event="click" execute="@this" render="@form" listener="#{clienteBean.preparaAlteracao}">
      <h:commandLink value="#{dados.nome}">
        <f:param name="id" value="#{dados.id}" /> 
      </h:commandLink>
      </f:ajax>                                                                                                 
    </p:column>

After clicking on the link the data is loaded in the fields but the field with mask does not display the mask

Does it instead show the placeholder `Informe o CPF`? – Selaron Mar 23 '19 at 06:14 — Selaron, Mar 23 '19 at 06:14

score 3 · Answer 1 · edited Mar 23 '19 at 07:34

The mask is displayed as soon as you focus the input. You likely have the input embedded into a h:form like this:

<h:form id="myForm">
    <h:inputText ... id="inputcpf" .../>        
</h:form>

The form id is prepended to the rendered input id in client side html:

<input id="myForm:inputcpf" ...>

Therefore your jQuery selector should look like this:

$("#myForm\\:inputcpf")

You can find out more about the client id in How can I know the id of a JSF component so I can use in Javascript. If your client id does not contain the id of the parent form as a prefix (or any other NamingContainer), then you most likely are using prependId="false" which should be prevented of being used for reasons described in UIForm with prependId="false" breaks <f:ajax render>

But the easiest and most stable way to get a masked input in your case would be to use the PrimeFaces component <p:inputMask/>. Using your current approach the mask is lost as soon as you update the input using AJAX. You'd have to also update the script element in order to execute the mask function again and have a mask on the updated input.

score 0 · Answer 2 · answered Mar 27 '19 at 20:44

I change my code by primefaces codes. Follow !

    <h:form id="form">
    <h:inputHidden value="#{userBean.user.id}" />
    <p:inputText required="true" value="#{userBean.user.name}" id="inputName" />
    <p:inputMask mask="(99)99999-9999" value="#{userBean.user.phone}" id="inputPhone" >
        <p:keyFilter regEx="/[a-z0-9_]/i"/>
    </p:inputMask>
    <p:commandButton value="Save" update="@form" process="@form" actionListener="#{userBean.saveUser}" />

I save the user and refresh all page... The new user is insert in datatable list. Then I have the dataTable with all users...

Next step I need click in Edit link for edit the informations... and in this moment the data is populated in fields but the field lost de mask in input field.

    <p:dataTable id="list_users" var="dados" value="#{userBean.allUsers}">
    <p:column>
       <f:facet name="header">ID</f:facet> 
       <h:outputText value="#{dados.id}" />
    </p:column>
    <p:column>
       <f:facet name="header">Name</f:facet> 
       <h:outputText value="#{dados.name}" />
    </p:column>
    <p:column headerText="Ação">
      <f:facet name="header">Ação</f:facet> 
      <f:ajax event="click" render="@form" listener="#{userBean.editUser}">
        <h:commandLink>
          <f:param name="id" value="#{dados.id}" />                                                             
          <h:outputText value="edit" />
        </h:commandLink>
    </f:ajax>
    </p:column>
    </dataTable>

Then Inputtext lost mask when Edit information, what´s wrong?

2 Answers2