Javascript Subscription After Asynchronous Postback UpdatePanel

Question

I am having a problem with jquery event handler after async postback on asp.net page. I read this section - this is a good solution, but I need a separate function. Therefore, I use jquery masked plugin .

My js code is now:

<script type="text/javascript"> jQuery(document).ready(function () { var control = $("#txtCustomerPhone"); InitPhonePattern(this, control); var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_endRequest(InitPhonePattern(this, control)); }); function InitPhonePattern(sender, args) { $(args[0]).mask("[phone]", { completed: function () { $('#btnCheckCustomerPhone').click();} }); } </script> 

As you can see, the mask was initialized 2 times: on the Ready () document and after async postback (on endRequest ()). But the mask plugin does not appear after asynchronous postback.

Does anyone understand the problem? I would be grateful for the help!

Answer 1

I want to say so thanks to Aristos for help and in the right direction! In your code, I corrected only this line:

 jQuery(document).ready(Init);//direct transfer function not work; 

Thus, the final code is as follows:

 <script type="text/javascript"> var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_endRequest(EndRequest); function EndRequest(sender, args) { Init(); } $(document).ready(function () { Init(); }); function Init() { var control = $('#txtCustomerPhone'); InitPhonePattern(control); } function InitPhonePattern(args) { $(args).mask("[phone]", { completed: function () { $('#btnCheckCustomerPhone').click(); } }); } </script> 

Answer 2

The problem in your code is that jQuery (document) .ready does not start after the update panel, so you need to make your endRequest from jQuery.

Try as follows:

 <script type="text/javascript"> var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_initializeRequest(InitializeRequest); prm.add_endRequest(EndRequest); function InitializeRequest(sender, args) { } function EndRequest(sender, args) { Init(); } jQuery(document).ready(function(){Init();}); function Init() { var control = $("#txtCustomerPhone"); InitPhonePattern(control); } function InitPhonePattern(args) { $(args[0]).mask("[phone]", { completed: function () { $('#btnCheckCustomerPhone').click();} }); } </script>