Question

I have an using an ascx control ina DotNetNuke framework that lets users input a phone number into a textbox. It has a requirement for an input mask [phone] and a checkbox that toggles the input mask off/on to allow international numbers to be input.
I had several problems with the asp.net ajax control toolkit when I tested Chrome so I decided to try jQuery with the jquery.maskedinput-1.3.min.js extension even though I’m new to it
I got the mask applied by adding the following code in the script section but the checkbox but only works once.
I think this is because the textbox is in an update panel. The checkbox has autopostback enabled but I don’t know how to capture that event to force a reload of the javascript.

    jQuery(document).ready(function () {
        jQuery(".primarymask").mask("[phone]");

        jQuery("input[name=ckbIntPrimaryPhone]").click(function () {
            if (jQuery(this).is(":checked")) {
                jQuery(".primarymask").mask("");
            }
            else {
                jQuery(".primarymask").mask("(999) 9999-9999");
            }
        }); 
    });

I tried using the code below then repeating the js functions but the mask only goes away until clicked then comes back all the time.

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function () {

\
}

Answer 1

You can try this:

Put this code into your ascx/aspx code file

<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" syncPostBackTimeout="70" runat="server" />

<script language="javascript" type="text/javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(update_start);
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(update_end);
    function update_start(sender, args) {
        // code here executes when update panel begins to update
    }

    function update_end(sender, args) {
        // code here executes when update panel is done updatinging
    }
</script>