Why textbox loses masking upon postback ?

Question

I have asked this question many time at different intervals at different forums but nothing helped me out but in hope I am posting it again. Please help.

I have applied JqueryMasking to a textbox i.e. NIC masking. It works when Page loads initially but stop working when postback occurs i.e. no mask is applied then. Why ?

jQuery(function ($) {

     $("#txtBoxComplainantCNIC").mask("99999-9999999-9", { placeholder: "" });
        });

textbox:

 <asp:TextBox ID="txtBoxComplainantCNIC" runat="server" onkeypress="return isNumberKeyCNIC(this)" ClientIDMode="Static" placeholder="XXXXX-XXXXXXX-X" MaxLength="15" CssClass="form-control"></asp:TextBox>

Textbox resides in UpdatePanel.

where is this jquery function written on the page? which event? — techspider, Jan 11 '16 at 20:22
If the textbox is in an update panel, the postback probably occurs asynchronously and your jquery function only fires on page load. You probably want to register your script using ScriptManager.RegisterStartupScript. — Bert, Jan 11 '16 at 20:29
@BertEvans how to do that sir ? I am totally naive in this sir. — Stacky Flowy, Jan 11 '16 at 20:32
I agreed with @BertEvans, you may google on how to add script — techspider, Jan 11 '16 at 20:33
@techspider I tried but I can't properly write it if you could help please ? I have tried whatever I could — Stacky Flowy, Jan 11 '16 at 20:41

score 2 · Answer 1 · edited May 23 '17 at 11:59

It looks like your problem is that you have registered a function with JQuery to execute when the page loads. That is what

jQuery(function ($) {
  $("#txtBoxComplainantCNIC").mask("99999-9999999-9", { placeholder: "" });
});

does. However that means that code will only execute when the page loads. Your problem is that in an UpdatePanel, your postback happens asynchronously (no page load), so your function doesn't fire a 2nd time and your TextBox loses it's mask.

What you probably want to do is register this part of your script

$("#txtBoxComplainantCNIC").mask("99999-9999999-9", { placeholder: "" });

in code behind so that ASP.NET knows to execute it when your UpdatePanel posts back. It will look something like this:

void Page_Load(object sender, EventArgs e)
{
    var setMaskScript =   "$('#txtBoxComplainantCNIC').mask('99999-9999999-9', { placeholder: '' });";
    ScriptManager.RegisterStartupScript(updatePanelID, this.GetType(), "SetMask", setMaskScript, true);
}

where updatePanelID is the ID of your UpdatePanel.

Here is a link that explains RegisterStartupScript and it's interaction with UpdatePanel.

Additionally, several methods for executing code on UpdatePanel postback are discussed here. One of which is simply adding a pageLoad function to your client side code.

pageLoad(){
  $("#txtBoxComplainantCNIC").mask("99999-9999999-9", { placeholder: "" });
}

@StackyFlowy Forgive me for asking possibly dumb questions, but do you know what code behind is and how to modify it? Specifically do you know where your Page_Load function is (if you have one already). — Bert, Jan 11 '16 at 20:57
@StackyFlowy I added an additional link that might help. I have to go for now. Good luck. — Bert, Jan 11 '16 at 21:19

score 0 · Answer 2 · edited Jul 29 '17 at 04:41

0

On the control that is posting back the page use the below code:

ScriptManager.RegisterStartupScript(Page, Page.GetType, "temp", "<script type='text/javascript'>$('#txtBoxComplainantCNIC').mask('99999-9999999-9');</script>", False)

edited Jul 29 '17 at 04:41

Arun Vinoth-Precog Tech - MVP

22,364
14
59
168

answered Jul 28 '17 at 20:28

user3653802

1
1

What is this? People can barely tell what this is about. Please edit your answer so that people can understand what you are trying explain. And elaborate the answer please so that people know why the answer will work. – UmarZaii Jul 28 '17 at 21:04

Why textbox loses masking upon postback ?

2 Answers2