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>を内側に移動します（再レンダリングで<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>

    または、completeで実行されるJSF ajaxイベントハンドラーを定義し、にフックし<f:ajax onevent>ます。例えば

    <f:ajax ... render="@form" onevent="function(data) { if (data.status == 'success') applyMask() }" />
于 2013-01-24T02:35:56.567 に答える