Javascript In Update Panel Doesn't Work After Partial Postback

Solution 1:

Place your datetimepicker initialisation code in the pageLoad function, which is called whenever the page loads (asynchronously or synchronously).

<scripttype="text/javascript">functionpageLoad(sender, args) {
        $('.datePicker').datetimepicker({ dateFormat: 'dd/mm/yy' });
    }      
</script>

Solution 2:

You can use pageLoad or .live:

Reference info: $(document).ready() and pageLoad() are not the same

.live:

Jquery .live works but not with .datepicker

$(function(){
    $('.datePicker').live('click', function() {
        $(this).datepicker({showOn:'focus'}).focus();
    });
});

pageLoad():

functionpageLoad(sender, args) {
    $('.datePicker').datetimepicker({ dateFormat: 'dd/mm/yy' });
}     

Solution 3:

I understand this is a old question but then also I am posting one more answer here if someone visit this page now or in later times for help. one can use

$(document).on()

as it makes sure that controls bind to the events whenever page loads. Its job is Similar to page load event but you can say syntax is different. And almost for anything and everything this works. I have more than 50 controls in a panel and all to perform different task and I never got into trouble.. not even once as i was using this function.

     $(document).on('eventName', 'element' , function(){
     //your code to perform some task; 
});

eventName can be any event - like click, change, select..

And

Element - can be a name, classname, id

example - as above question -

html -

<script src="lib/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<inputtype="text" class="datePicker" data-provide="datepicker-inline" data-date-format="mm/dd/yyyy">

Javascript -

$(function(){
     $(document).on('click', '.datePicker' , function(){
     $(this).datepicker();
    });
});

Share