3

我有这个 maskinput 定义：

<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 在提交表单后不会改变任何东西。

4

1 回答 1

4

如果输入组件本身在表单提交时重新渲染，就会发生这种情况。重新渲染将导致 HTML DOM 中的原始 HTML 元素被来自 ajax 响应的新 HTML 元素替换。尽管它们可能表示完全相同，但新的 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>to 移到内部<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() }" />
于 2013-01-24T02:35:56.567 回答