在Javascript函数中使用AJAX响应

Question

Essentially, I have a list of clients and a calendar beside this. The idea is that when a client is clicked then it find the availability and then return this information through a calendar plugin to show which days are available. Below is my code inside the 'click' function:

$.ajax({
    type: "GET",
    url: "inc/available_dates_search.php",
    data: string,
    cache: false,
    success: function(response){

        var result = eval(response);

        $('#date_calendar').glDatePicker({
            selectableDates: result
        });
    }
});

The property 'selectableDates' needs to be in the format [{ date: new Date(2013, 8, 15) }] when I perform alert(result) it gives me the correct output . This leads me to believe that the problem is with passing the value to the datepicker. Is it not possible to pass this response to the datepicker and if it is how can it be achieved?

I am using the glDatePicker, which can be found here: http://glad.github.io/glDatePicker/

Many thanks in advance.

Answer 1

Shot in the dark since I never used glDatePicker

The problem is probably the fact the calendar already exists and it will not update. You will need to destroy it and re-initialize it. Or if the API has a way to update the dates, call that method.

If it is written correctly and has a destroy method, something like this should work.

$('#date_calendar').glDatePicker("destroy").glDatePicker({
     selectableDates: result
});

Answer 2

Try to use callback, response evaluation might take too long.

$.ajax({
 type: "GET",
 url: "inc/available_dates_search.php",
 data: string,
 cache: false,
 success: function(response){
   (function(res, callback){
       // ... your code to process "res"
       result = xyz;
       callback(result);
   })(response, function(data){
       $('#date_calendar').glDatePicker({
          selectableDates: data
       });
   });

 }