MaskInput не работает после отправки формы в JSF

У меня есть это определение ввода маски:

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

В этой форме:

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

Это прекрасно работает, но если пользователь заполнит форму неправильно и отправит ее, маска в этом поле ввода больше не будет работать.

Это почему ? Кто-нибудь знает, почему? Мне это кажется немного странным, потому что HTML ничего не меняет после отправки формы.


javascript validation jsf jsf-2 maskedinput
person Valter Silva    schedule 23.01.2013    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Это произойдет, если сам компонент ввода будет повторно визуализирован при отправке формы. При повторном рендеринге исходный элемент HTML в HTML DOM будет заменен новым элементом HTML из ответа ajax. Несмотря на то, что они могут представлять одно и то же, к новому HTML-элементу больше не привязана маска jQuery. По сути, вам нужно повторно выполнить на нем маску jQuery. Однако функция jQuery, как вы объявили, работает только при готовности DOM (при загрузке страницы). Он не выполняется повторно при последующих запросах ajax.

У вас есть в основном 2 варианта:

  1. Не включайте компонент ввода в повторную визуализацию отправки формы. Пусть отправка формы повторно отображает только компоненты сообщения вместо @form, например.

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

  2. Повторно запустите функцию jQuery после завершения отправки формы. Есть несколько способов добиться этого. По сути, либо переместите <script> внутрь <h:form> (при условии, что вы используете @form при повторном рендеринге)

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

    или определите обработчик событий JSF ajax, который запускается при завершении, и подключите его к <f:ajax onevent>. Например.

    <f:ajax ... render="@form" onevent="function(data) { if (data.status == 'success') applyMask() }" />
person BalusC    schedule 24.01.2013
comment
Большое спасибо Bauke, я выбрал 2 подхода. Спасибо! - person Valter Silva; 25.01.2013