Question

In html page there’s a javascript file whit this content

  var eventsDates = {
    "0" :["11-10-2012","21-10-2012","28-10-2012","25-11-2012","15-12-2012"],
    "10":["11-10-2012"],
    "11":["21-10-2012","28-10-2012"],
    "12":["25-11-2012","15-12-2012"]
  }

then through a select I choose the ID to get only a few dates

$('#select_events').bind('change', function(){
    eventsDates = $(eventsDates[$(this).val()]);
});

finally, use this function to build dates and pass them to the datepicker plugin

function available(date) {
    dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
    if ($.inArray(dmy, eventsDates) != -1) {
        return [true, "","Available"];
    } else {
        return [false,"","unAvailable"];
    }
}

to activate datepicker I use this

$('#datepickerEventi').datepicker({
    beforeShowDay:available,
    dateFormat: 'dd/mm/yy'
});

the problem is that the first time it works if I select another value does not work anymore as if the array was empty

Thanks in advance

Answer 1

The array is actually empty because you are overriding the value here:

$('#select_events').bind('change', function(){
    eventsDates = $(eventsDates[$(this).val()]);
});

Use another variable name to cache the dates array for the selected event. You could change it to this:

// default the event dates array to the first option from events dropdown
var selectedEventDates = eventsDates[$("#select_events option:first").val()];

$('#select_events').bind('change', function(){
    selectedEventDates = eventsDates[$(this).val()];
});

and update the name here:

if ($.inArray(dmy, selectedEventDates) != -1) {