1

I'm using a masked input plugin to control entry of fields (http://digitalbush.com/projects/masked-input-plugin/)..

This is working very well ... until I added my update panel and boom no more masked input after update .. I have my scripts all in the page. Reading jQuery in update panel not successfully adding cssclass after panel refresh I also tried Running Javascript after update panel refresh but this doesn't work either..

it looks as though event bindings are lost.. How can get my script to run to re-add the input masks after update panel update?

script type="text/javascript">
    jQuery(function ($) {
        $("#Curr_Mileage").mask("9?99999");
        $("#Litres").mask("99.9");
        $("#ordno").mask("aa99999");
        $("#litre2").mask("99.9");
    });
</script>
Community
  • 1
  • 1
user552769
  • 361
  • 6
  • 20
  • 1
    are all these controls inside update panel? – Sid M Jun 12 '14 at 07:14
  • 1
    [you tried this](http://stackoverflow.com/questions/1190549/how-can-i-run-some-javascript-after-an-update-panel-refreshes) ? – Sid M Jun 12 '14 at 07:16
  • yes all the controls are inside the update panel. The script I placed in the head – user552769 Jun 12 '14 at 08:11
  • SID M.. Thanks...this fixed it – user552769 Jun 12 '14 at 08:16
  • so should i post it as answer? – Sid M Jun 12 '14 at 08:17

4 Answers4

3

you need to create obj of PageRequestManager and call your jquery after update panel updated
and make sure this script block should be outside update panel 

<script>
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_pageLoaded(pageLoaded);



    function pageLoaded() {

        jQuery(function ($) {
            $("#Curr_Mileage").mask("9?99999");
            $("#Litres").mask("99.9");
            $("#ordno").mask("aa99999");
            $("#litre2").mask("99.9");
        });

    }

</script>
Anant Dabhi
  • 10,864
  • 3
  • 31
  • 49
  • thanks I've tried this but no joy. The masks do not apply even when the page is first loaded using above – user552769 Jun 12 '14 at 08:04
  • 1
    simple pageload function works great.. Thanks everyone.. script type="text/javascript"> function pageLoad() { jQuery(function ($) { $("#Curr_Mileage").mask("9?99999"); $("#Litres").mask("99.9"); $("#ordno").mask("aa99999"); $("#litre2").mask("99.9"); }); } – user552769 Jun 12 '14 at 08:17
1
         Sys.WebForms.PageRequestManager.getInstance().add_endRequest(myFunc);

    function myFunc () {
jQuery(function ($) {
    $("#Curr_Mileage").mask("9?99999");
    $("#Litres").mask("99.9");
    $("#ordno").mask("aa99999");
    $("#litre2").mask("99.9");
});

}

Ali
  • 2,574
  • 1
  • 17
  • 24
  • thanks I've tried this but same as below. The masks do not apply even when the page is first loaded using above – user552769 Jun 12 '14 at 08:04
1

Try this

<script> 
   function pageLoad(){ 
       jQuery(function ($) {
        $("#Curr_Mileage").mask("9?99999");
        $("#Litres").mask("99.9");
        $("#ordno").mask("aa99999");
        $("#litre2").mask("99.9");
    });
 }  
</script>
Sid M
  • 4,354
  • 4
  • 30
  • 50
0

This link may help you.

Managing partial-page updates of server UpdatePanel controls in the browser.

http://msdn.microsoft.com/en-us/library/vstudio/bb311028(v=vs.100).aspx

Sushmit Patil
  • 1,335
  • 1
  • 14
  • 26