Затем Inputtext потерял маску при редактировании информации, что не так? - PullRequest
Новая
       17

Затем Inputtext потерял маску при редактировании информации, что не так?

1 голос
/ 22 марта 2019

Мне нужно показать маску в поле InputText после щелчка по гиперссылке для редактирования информации в моей ФОРМЕ.Когда я впервые получаю доступ к форме, в полях ввода текста правильно отображаются маски.

Следуйте моему коду: 

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

И часть кода EDIT: 

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

После нажатия на ссылку данные загружаются в поля, но поле с маской не отображает маску

Ответы [ 2 ]

3 голосов
/ 23 марта 2019

Маска отображается, как только вы сфокусируете ввод.Скорее всего, у вас есть входные данные, встроенные в h:form, например: 

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

. form id добавляется к отображаемому input id в html на стороне клиента: 

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

Поэтомуваш селектор jQuery должен выглядеть следующим образом: 

$("#myForm\\:inputcpf")

Подробнее об идентификаторе клиента можно узнать в Как узнать идентификатор компонента JSF, чтобы использовать его в Javascript .Если ваш идентификатор клиента не содержит идентификатор родительской формы в качестве префикса (или любой другой NamingContainer ), то вы, скорее всего, используете prependId="false", который следует избегать использовать по причинам, описанным в UIForm с prependId = "ложными" перерывами

Но самый простой и стабильный способ получить маскированный ввод в вашем случае - это использовать компонент PrimeFaces <p:inputMask/>.При вашем текущем подходе маска теряется, как только вы обновляете ввод, используя AJAX.Вам также необходимо обновить элемент script, чтобы снова выполнить функцию mask и иметь маску для обновленного input.

0 голосов
/ 27 марта 2019

Я меняю свой код на коды простых лиц.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}" />

Я сохраняю пользователя и обновляю всю страницу ... Новый пользователь вставлен в список данных.Затем у меня есть таблица данных со всеми пользователями ...

Следующий шаг Мне нужно нажать на ссылку Изменить для редактирования информации ... и в этот момент данные заполняются в полях, но поле потеряномаска в поле ввода. 

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