Dynamic fields with jsf and ajax not rendering mask

Question

I have a JSF form in which I add fields <input> dynamically with AJAX.

When I click on <h:commandButton> that trigger the routine of adding the <input> the field is added however the mask I set for it is not applied. And in case I have already typed some value in the previous field, the memso disappears.

I wonder how to render the mask for each field that dynamically added without prejudice to data from other fields.

XHTML:

<h:panelGrid id="grid-phone" columns="1" class="accord-son-3">                                        
    <h:dataTable id="table-phone" value="#{cadastroUsuarioBean.items}" var="item" width="595">                                              
        <h:column><h:outputLabel value="Telefone" /></h:column>                                            
        <h:column ><h:inputText value="#{item.value}" class="column-cad phone" styleClass="phone"/></h:column>                                            
        <h:column>
            <h:commandLink value="Remover" action="#{cadastroUsuarioBean.remove(item)}" class="jump-link" style="margin-left: 65px;"/>                                            
        </h:column>                                            
    </h:dataTable>                                        

    <h:commandButton type="button" value="Adicionar Telefone" class="btn"  style="font:normal bold 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin-top: 5px" >                                            
        <f:ajax listener="#{cadastroUsuarioBean.add}" render="table-phone" execute="@form"/>
    </h:commandButton>
</h:panelGrid>      

Java

public void add(AjaxBehaviorEvent event) {
    items.add(new Item());
    ExternalContext externalContext = FacesContext.getCurrentInstance().getExternalContext();  
    HttpSession session = (HttpSession) externalContext.getSession(true);  
    session.setAttribute("formulario", marca);
    session.setAttribute("itens", items);
}    

Javascript

<script>
    jQuery(function($){     
        $("#form\\:date").mask("99/99/9999");
        $("input.phone").mask("(99) 9999-9999");     
        $("#form\\:cep").mask("99999-999");                      
    });
</script>

Answer 1

When events occur in JSF, this renders part of the view through Ajax, replacing the components of the HTML code with new ones.

Often this is imperceptible, but each updated element is a new element reconnected from the state of the view on the server.

This behavior causes the loss of any change or event added via Javascript. It is very common to be difficult to integrate jQuery plugins and JSF components because of all this.

Something you can do to get around the situation is reapply the masks after Ajax.

If you used Primefaces components you could use the attribute oncomplete to run a Javascript at the end of Ajax.

With the tablib f, however, it takes a little more work. Second this link it is possible to do as follows:

<f:ajax render="itemsDataTable" 
    onevent="function(data) { if (data.status === 'success') { aplicarMascara(); } }"/>

Don’t forget to put the Javascript snippet that applies the mask on a function so you can run the snippet whenever needed.