Masked Input plugin for jQuery with UpdatePanel

Question

My problem is: after my code call the server and it return with the alteration that i need, my mask disappear. (this occur only with the mask inside the update panel)

PS: I tryed link my html code with the data, but i was unable to do it.

so just to show the ideia:

<ScriptManager>
    <UpdatePanel>
    <ContentTemplate>
        <Table>
            <asp:TextBox runat="server" ID="txtCnpj" CssClass="cnpj_m" MaxLength="50"/>
        </Table>
    </ContentTemplate>
    </UpdatePanel>
</ScriptManager>

In my code-behind I just hide and show some items. (It's an ascx control) and my javascript is this:

$(function () {
    $(".data_m").mask("99/99/9999");
    $(".telefone_m").mask("9999-9999");
    $(".dddtelefone_m").mask("(999) 9999-9999");
    $(".ddd_m").mask("(999)");
    $(".cep_m").mask("99999-999");
    $(".cpf_m").mask("999.999.999-99");
    $(".cnpj_m").mask("99.999.999/9999-99");
});

I'm using jQuery 1.5.1.

And the plugin Masked Input Plugin from digitalBush

Anyone has any idea how i can solve this?

PS2: my mask WORKS when i start the page, only stop after i call the server.

EDIT:

this is how i tryed update after load.

$(".rbToggle").live('change',function () {
    //$("#txtCpf").mask("999.999.999-99");
    //$("#txtCnpj").mask("99.999.999/9999-99");
    // Edit, i'm using the code below, i put the top as sample, but i guess it may be kind hard to ppl see this sometimes.
    $("#%= txtCpf.ClientID %>").mask("999.999.999-99");
    $("#%= txtCnpj.ClientID %>").mask("99.999.999/9999-99");
});

EDIT2: i forgot mentioning that without updatepanel, the mask and javascript work is perfect

Answer 1

You need to activate the masks each time the content is re-rendered. So when the update panel reloads, activate the masks again.

You can do this through the pageLoaded javascript method, through a RegisterStartupScript, or by placing the activation javascript within the partial view.

For example:

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(function(){
    // global partial postback complete
    // add masks here
});