Search code examples
xpages

Using JQuery to mask input fields. When I refresh a panel that contains those fields the masking stops working

I have several phone number fields that use jquery masking to format the input. See the code below. The fields work great until a combo box change above refreshes a panel that contains those fields. Once the refresh happens my masking stops working.

Any idea why and how to prevent this from happening?

<xp:scriptBlock id="scriptBlock7">
<xp:this.value><![CDATA[
jQuery(function($){
x$("#{id:dayPhone1}").mask("(999) 999-9999? x 9999999", {placeholder : " " } );
x$("#{id:eveningPhone1}").mask("(999) 999-9999? x 9999999", {placeholder : " " } );
x$("#{id:cellular1}").mask("(999) 999-9999? x 9999999", {placeholder : " " } );

});
]]></xp:this.value>
</xp:scriptBlock>
Solution

  • Is your scriptBlock also on the panel that is being refreshed? It needs to be in order for the the mask to be reapplied to the fields after the refresh.