MaskInput don't work after submit form in JSF

Question

I have this maskinput definition:

<ui:define name="additional-javascript">
    <h:outputScript name="jquery.maskedinput-1.3.min.js" library="javascript" />
    <script>
            jQuery(function($){
            $("[id='register_form:cnpj']").mask("99.999.999/9999-99");
        });
    </script> 
</ui:define>

In this form:

<h:form id="register_form">
    <div class="four columns alpha">
        CNPJ : <h:message id="m_cnpj" for="cnpj" styleClass="red" />
        <h:inputText id="cnpj" value="#{clientec.cb.cliente.cnpj}" styleClass="cnpj">
            <f:ajax event="blur" render="m_cnpj" />
        </h:inputText>
    </div>
   <div class="twelve columns alpha"></div>
   //.. other input fields
</h:form>

Which works pretty fine, but if the user fills something wrong in the form and submit it, the mask in this input field don't work anymore.

Why is that ? Anyone knows why ? It seems a little weird to me because the HTML don't change a thing after submit the form.

score 4 · Accepted Answer · answered Jan 24 '13 at 02:35

That will happen if the input component itself is re-rendered upon form submit. A re-render will cause the original HTML element in the HTML DOM to be replaced by the new HTML element from the ajax response. Even though they may represent exactly the same, the new HTML element does not have the jQuery mask attached anymore. Basically, you need to re-execute the jQuery mask on it. However, the jQuery function as you've declared there runs only on DOM ready (on page load). It is not re-executed on subsequent ajax requests.

You have basically 2 options:

Do not include the input component in re-render of the form submit. Let the form submit re-render only the message components instead of @form, for example.

<h:form>
    <h:inputText id="input1" ... />
    <h:message id="m_input1" ... />
    <h:inputText id="input2" ... />
    <h:message id="m_input2" ... />
    <h:inputText id="input3" ... />
    <h:message id="m_input3" ... />
    <h:commandButton ...>
        <f:ajax ... render="m_input1 m_input2 m_input3" />
    </h:commandButton>
</h:form>

Re-run the jQuery function on complete of the form submit. There are several ways to achieve this. Basically, either move the <script> to inside the <h:form> (assuming that you're using @form in re-render)

<h:form>
    <h:inputText id="input1" ... />
    <h:message id="m_input1" ... />
    <h:inputText id="input2" ... />
    <h:message id="m_input2" ... />
    <h:inputText id="input3" ... />
    <h:message id="m_input3" ... />
    <h:commandButton ...>
        <f:ajax ... render="@form" />
    </h:commandButton>
    <script>$("[id='register_form:cnpj']").mask("99.999.999/9999-99");</script>
</h:form>

or define a JSF ajax event handler which runs on complete and hook it to <f:ajax onevent>. E.g.

<f:ajax ... render="@form" onevent="function(data) { if (data.status == 'success') applyMask() }" />

Thank you very much Bauke, I chose the 2 approach. Thanks! – Valter Silva Jan 25 '13 at 06:21 — Valter Silva, Jan 25 '13 at 06:21

MaskInput don't work after submit form in JSF

1 Answers1