jQuery UI DatePicker - Update global events array with ajax call

Question

I have a jQuery UI DatePicker highlighting events and event info when clicked. The events are set in an static (hard coded) array formatted like this:

var events = [ 
    { Title: "Event 1", Date: new Date("11/15/2013") }, 
    { Title: "Event 2", Date: new Date("11/15/2013") }, 
    { Title: "Event 3", Date: new Date("11/25/2013") }, 
    { Title: "Event 4", Date: new Date("11/30/2013") }
];

This works well but the events array needs to be updated on DatePicker 'onChangeMonthYear' so I have added an ajax call each time selecting a new month but have some trouble..

Question: How-to update the global events array with the return from ajax call?

This is what I have tried so far: PHP

$items = array();
foreach ($events as $event) {
$items[]= array('Title' => $event['SUMMARY'],'Date' => gmdate("m/d/Y",$event['DTSTART']));
}
echo json_encode($items);

JS

$.ajax({ 
type: 'GET',
async : false,
data: {start : firstDay, end : lastDay},
url: "ajax/getCalendarItems.php",
success: function(data){
    events = data;
}
});

Result:

console.log(data)
[{"Title":"New event 1","Date":"12\/20\/2013"},{"Title":"New event 2","Date":"12\/20\/2013"},{"Title":"New event 3","Date":"12\/23\/2013"},{"Title":"New event 4","Date":"12\/30\/2013"}]

TypeError: '[{"Title":"New event 1","Date":"12\/20\/2013"},{"Title":"New event 2","Date":"12\/20\/2013"},{"Title":"New event 3","Date":"12\/23\/2013"},{"Title":"New event 4","Date":"12\/30\/2013"}]' is not a valid argument for 'in' (evaluating 't-1 in e')

andrea.rinaldi · Accepted Answer · 2013-11-22 08:22:01Z

2

Have you tried setting

        dataType: "json",
    contentType: "application/json; charset=utf-8",

in you ajax call's parameters? It should automatically decode the json data you passed from PHP server.

Because it seems like your 'data' parameter is still JSON.

Let me know! :)

answered Nov 22, 2013 at 8:22

andrea.rinaldi

1,1871 gold badge13 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

andrea.rinaldi Over a year ago

I didn't understand.. was my answer helpful or just userless? :)

kilroy Over a year ago

helpful :) tried to post a new answer but have not the reputation points needed...

kilroy Over a year ago

anyway, no errors with your answer but events are not highlighted in calendar so there might be something with the date comparison.. there are some differences in the initial array date vs the date fetched in ajax php call, new Date etc

kilroy Over a year ago

Ok, found error in comparison between returned object date and the dates in DatePicker... Thats why they are not highlighted. 12/23/2013===1388703600000

andrea.rinaldi Over a year ago

Understood.. Happy to ear that from you ;) Could you give the +1 to my answer? Obviously not the mark as correct 'cause you completed the work by yourself..

|

Collectives™ on Stack Overflow

jQuery UI DatePicker - Update global events array with ajax call

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related