JQuery datepicker not working after ajax call
datepicker, jquery, jquery-ui, php
Solution
You need to `reinitialize` the date picker in Ajax success
$('.datepicker').datepicker({dateFormat: "dd-mm-yy"});
$('#btn').click(function() {
$.ajax({
type: "GET",
url: "my_ajax_stuff.php" ,
success: function(response) {
$('#ct').html(response);
$( "#datepicker" ).datepicker();
/*added following line to solve this issue ..but not worked*/
//$( ".datepicker" ).datepicker({dateFormat: "dd-mm-yy"});
} ,
error: function () {
$('#ct').html("Some problem fetching data.Please try again");
}
});
});
Problem
I have the following code ``` <html> <head> //included all jquery related stuff ..not shown here </head> <body> <button id = 'btn' /> <div id = 'ct'> <?php echo file_get_contents('my_ajax_stuff.php'); ?> </div> </body> <script> $('.datepicker').datepicker({dateFormat: "dd-mm-yy"}); $('#btn').click(function() { $.ajax({ type: "GET", url: "my_ajax_stuff.php" , success: function(response) { $('#ct').html(response); /*added following line to solve this issue ..but not worked*/ //$( ".datepicker" ).datepicker({dateFormat: "dd-mm-yy"}); } , error: function () { $('#ct').html("Some problem fetching data.Please try again"); } }); }); </script> </html> ``` The page my_ajax_stuff.php contains a jquery ui datepicker with class = 'datepicker'.On the first load the datepicker works.But when I click on the button to reload it again , the contents are replaced with new contents.But the datepicker is not working.I have tried initialising the datepicker inside the ajax success handler ,as you see.But it also failed.What is the issue.How can it be solved???