CODEWITHSUNDEEP
javascriptjqueryjquery-ui-datepickeruidatepicker
Ravi Parmar
Ravi Parmar

Reputation: 81

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>

Upvotes: 1

Views: 2709

Answers (3)

KruPa
KruPa

Reputation: 36

<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>

Upvotes: 1

Deepak Joshi
Deepak Joshi

Reputation: 1066

I have tried below code working fine. Could you tell me how are refreshing the DIV.

jQuery(function($) {
    var currentDate = new Date();
    $('#hiddenDate').datepicker({
       minDate: 0
    });
    $(document).on('click','#pickDate',function (e) {
        $('#hiddenDate').datepicker("show");
    });
	$('#btnRefresh').click(function(){
	 $.ajax({url: "https://restcountries.eu/rest/v2/region/europe", success: function(result){
	 console.log(result);
	     $.each(result,function(index,value){
		  $('#myTable tbody').append('<tr class="child"><td>'+value.name+'</td></tr>');
		 })
    }});
	});
});
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<input id="hiddenDate" name="hiddenDate" type="text"/>
<button type="button" id="pickDate" class="btn btn-trial">Change shipping date</button>

<button type="button" id="btnRefresh" class="btn btn-trial">Refresh</button>
<table id="myTable">
<tbody>
</tbody>
</table>
</body>
</html>

Updated code with refresh button it is working. Please send you sample code

Upvotes: 1

Amit Singh
Amit Singh

Reputation: 220

use link of Jquery library or CDN just above the datepicker plugins link in header tags.

Upvotes: 1

Related Questions