Dynamic fields with jsf and ajax not rendering mascara

Question

Dynamic fields with jsf and ajax not rendering mascara

Navigation

#1 by (3 votes)

3

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

When I click on <h:commandButton> it triggers the routine to add <input> the field is added however the mask that I set for it is not applied. And if I have already typed some value in the previous field, the memo disappears.

I would like to know how to render the mask for each field that dynamically added without losing 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>

javascript ajax jsf

asked by anonymous 06.08.2014 / 15:11

1 answer

How to prevent a simple query from locking the entire MySQL database major / minor in vectors

score 3 · Accepted Answer

When events occur in JSF, it renders part of the view via Ajax, replacing the components of the HTML with new ones.

This is often imperceptible, but each updated element is a new element rebuilt from the view state on the server.

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

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

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

With the f , however, it takes a little more work. this link can be done as follows:

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

Do not forget to put the Javascript snippet that applies the mask in a function to be able to execute the snippet whenever necessary.