update panel , add function that works after updating

Question

I use this jquery datepicker

I have input in the updatePanel

 <input id="DateMask" type="text" />

and js code:

function SetD() {
    alert(1);
}

$(document).ready(function () {
    SetD();  
    $("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true
    });
});

But the problem is that when i post my form to the server i only refresh update panel so $(document).ready(function () doesn't work after refreshing ,so where i can execute my function from?

possible duplicate of [Asp.Net UpdatePanel in Gridview Jquery DatePicker](http://stackoverflow.com/questions/3341623/asp-net-updatepanel-in-gridview-jquery-datepicker) — Aristos, Aug 20 '13 at 07:54

score 2 · Accepted Answer · edited May 23 '17 at 12:28

2

You need to rebind in the Sys.WebForms.PageRequestManager.add_endRequest event. See this similar post jQuery $(document).ready and UpdatePanels?

edited May 23 '17 at 12:28

Community

1
1

answered Aug 20 '13 at 07:56

guymid

1,186
8
11

1

Thank you! That was my first ever answer on SO and you accepted it :-) Thanks for getting me started! – guymid Aug 20 '13 at 09:33

score 1 · Answer 2 · edited May 23 '17 at 10:25

To make it work you need to re-initialize it after the updates of UpdatePanel. You can do that by using the UpdatePanel functions. I also like here to note, that you also need to unbind it just before the UpdatePanel updates to avoid memory leaks.

<script type="text/javascript"> 
   // if you use jQuery, you can load them when dom is read.
   $(document).ready(function () {
       var prm = Sys.WebForms.PageRequestManager.getInstance();    
       prm.add_initializeRequest(InitializeRequest);
       prm.add_endRequest(EndRequest);

       // Place here the first init of the DatePicker
       InitDatePicker();
    });        

    function InitializeRequest(sender, args) {
       // make unbind to avoid memory leaks.
       $("#datepicker").unbind();
    }

    function EndRequest(sender, args) {
       // after update occur on UpdatePanel re-init the DatePicker
       InitDatePicker();
    }


    function InitDatePicker()
    {
        $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true
        });    
    }
</script>

Almost the same question but on GridView: Asp.Net UpdatePanel in Gridview Jquery DatePicker

update panel , add function that works after updating

2 Answers2