Question 70052 in Ajax Question posted in
You can find the official documentation here.

Object property doesn't update when user changes mind – Jquery ajax

The idea is that once a specific province is chosen from a selector, the calendar subsequently only shows the available dates in the flatpickr calendar. That works.

However, when the user changes their mind and chooses another province, the available dates for that province don’t get updated. Console.log (data) shows the dates being updated, it’s just not reflected in the calendar.

So I guess the specific question is; how to reset the enable property.

Source

$(document).ready(function(){
    $('select[name="provincie"]').on('change',function(){
      var provincie_id = $(this).val();
      if (provincie_id){
        $.ajax({
            url: 'provincie/datum/'+provincie_id,
            type: 'GET',
            dataType: 'json',
            success: function (data){
                  var config = {
                    inline: false,
                    altInput: true,
                    dateFormat: "Y-m-d",
                    enable: data,

                  }
                 console.log(data); //shows dates are being updated
                $("input[type=datepick]").flatpickr(config);
            }
        });
      } else {
        $('select[name="times"]').empty();
      }

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

This is the data for province #1:

["2021-09-27","2021-09-28","2021-09-29","2021-09-30"]

for province #2:

["2021-10-06","2021-10-08","2021-10-15","2021-10-28"]
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to Barmar for the help. Below is the changed code. I also added a clear() to reset the values.

    $(document).ready(function(){
  let calendar = flatpickr("input[type=datepick]",{altInput:true, dateFormat:"Y-m-d", enable:["2021-09-30"]});

    $('select[name="provincie"]').on('change',function(){
      calendar.clear();

      var provincie_id = $(this).val();

      if (provincie_id){

        $.ajax({
            url: 'thuisprik-afspraak/datum/'+provincie_id,
            type: 'GET',
            dataType: 'json',
            success: function (data){

                calendar.set("enable", data);
            }
        });
      } else {
        $('select[name="stad"]').empty();
      }

    });

  2. 0

    .flatpickr(config) is only used for the initial configuration of the datepicker. If you want to change an existing datepicker, you need to use the "set" method:

    $("input[type=datepick]").flatpickr("set", "enable", data);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search