Search code examples
javascriptjqueryjquery-ui-datepickeruidatepicker

Date picker not working after refresh the div

On page load date-picker working fine but after refresh the div it is not working

it gives error like

jquery-ui.js:8633 Uncaught TypeError: Cannot read property 'settings' of undefined error

my code is below

<!DOCTYPE html>
<html>
<head>
    <title>Image Select</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


</head>
<body>
    <div class="subscription-container">
      <input id="hiddenDate" type="hidden"/>
      <button type="button" id="pickDate" class="btn btn-trial">Change shipping date</button>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('#hiddenDate').datepicker({
            minDate: 0
        });
        jQuery(document).on('click','#pickDate',function (e) {
        // $('#pickDate').click(function (e) {
            jQuery('#hiddenDate').datepicker("show");
            // e.preventDefault();
        });
    });
    jQuery(document).on('change','#hiddenDate',function(){
            jQuery('#hiddenDate').datepicker("hide");

        if(confirm("are you sure to reload")==true){
            jQuery('.subscription-container').load(window.location.href+" .subscription-container>*","");

        }
     });
    </script>
</body>
</html>
Solution 
  • <html>
<head>
    <title>Image Select</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
    <div class="subscription-container">
      <input id="hiddenDate" type="hidden" />
      <button type="button" id="pickDate" class="btn btn-trial">Change shipping date</button>
  </div>


  <script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('#hiddenDate').datepicker({
            minDate: 0,
        });

        $('#pickDate').click(function () {
            jQuery('#hiddenDate').datepicker("show");
        });
    });

    jQuery('#hiddenDate').change(function(){
        jQuery('#hiddenDate').datepicker("hide");

        if(confirm("are you sure to reload")==true){
           setTimeout(function(e) {
            e.preventDefault()
            jQuery('.subscription-container').load(window.location.href+" .subscription-container>*","");
        }, 100);
       }
   });
</script>
</body>
</html>