"Uncaught TypeError: Cannot read property 'clone' of undefined" when adding recurring events to database

Question

For some reason I'm getting ""Uncaught TypeError: Cannot read property 'clone' of undefined" when I'm trying to update the calendar with a recent set of recurring event using $('#calendar').fullCalendar('updateEvent',events[i]); in the sucess call of my ajax (check last code snippet)

This is the structure of my function call:

I'm calling addEventSource inside the eventReceive function so when an element is dragged to the calender, this is deleted and the recurring events are added:

eventReceive : function(event) {
    ...
     $('#calendar').fullCalendar('removeEvents', event._id);
    $('#calendar').fullCalendar(  'addEventSource',function(start, end, status,  callback) {

Inside addEventSource, i simply check the day of the week that the event has been dropped upon and duplicate that for upcoming days of the same day:

$('#calendar').fullCalendar( 'addEventSource',function(start, end, status,  callback) {
  var start_date = event.start.toDate();
  var stop_date = new Date("2017-01-15"); // for testing purposes to avoid filling up database with too many entries
  var events = [];
  ...
    for (loop = start_date.getTime(); (loop <= end._d.getTime()) && (loop <= stop_date); loop = loop + (24 * 60 * 60 * 1000)) { 
       ...
       var test_date = new Date(loop);
       var momentOfDate = moment(test_date);
       var formattedStart = momentOfDate.format("YYYY-MM-DDTHH:mm:ss");
       ...
        if (test_date.getDay() == event.start.weekday()) {
              events.push({
                                title: event.title,
                                start: formattedStart,
                                end: // same procedure for end as start
                                parent_id : // some variable
                                id: // some unique variable,
                                tDuration : event.tDuration,
                                dow : ''
          });
        } //if          
     } // for loop
     callback(events);

After the callback, we would like to add the newly created events to the database. And this works just fine, every recurring event i added is in the database IF i exclude the "$('#calendar').fullCalendar('updateEvent',events[i]);" function call but then I need to reload the page in order for the database to update when i move events around. This is the ajax call:

for (i = 0 ; i < events.length-1 ; i++) {
        var duration = events[i].tDuration;
        $.ajax({
            url: 'process.php',
            data: 'type=new&title='+events[i].title+'&startdate='+events[i].start+'&duration='+duration+'&enddate='+events[i].end+'&dow='+events[i].dow,
            type: 'POST',
            dataType: 'json',
            success: function(response){
                //location.reload(); WORKS but requires reload
                  $('#calendar').fullCalendar('updateEvent',events[i]); // generates typeError but needed in order modify recurring events

                            },
            error: function(e){
                    alert('error');
                    console.log(e.responseText);
                }
            })
        }

What do i do in this situation? I can without problems add a single event and perform an identical version of the ajax without any errors, the problem occurs when I try and access the events in my own 'events' array instead of using the event passed as an argument in the eventReceive function call. However since I'm adding multiple events I'm kinda forced to do it the way that I'm doing it it seems like.

Code for solo event (WORKS!):

 eventReceive : function(event) {
            var title = event.title;
            var start = event.start.format();
            var end = event.end.format();
            var duration = event.tDuration;
            var dow ='';
            $.ajax({
                url: 'process.php',
                data: 'type=new&title='+title+'&startdate='+start+'&duration='+duration+'&enddate='+end+'&dow='+dow,
                type: 'POST',
                dataType: 'json',
                success: function(response){
                    event.id = response.eventid;
                    $('#calendar').fullCalendar('updateEvent',event);
                },
                error: function(e){
                    alert('error');
                    console.log(e.responseText);
                }
            });

removed attempt1 cus found a solution myself that worked

Ally Murray · Accepted Answer · 2016-12-19 10:02:15Z

4

When you call updateEvent, event must be the original Event Object for an event, not merely a reconstructed object.

So you will either have to get the original event and update the properties on it and then call updateEvent or you could call removeEvents passing the id and then call renderEvent passing the event from your array.

answered Dec 19, 2016 at 10:02

Ally Murray

6091 gold badge7 silver badges16 bronze badges

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

8 Comments

jones Over a year ago

Yes that's what i thought since im trying with a reconstructed object. Getting the original event and updating its properties doesnt really help me since im creating new ones and i want to update these. Any other way to do what im trying to do or did I approach in the wrong way trying to add mulitple recurring events?

Ally Murray Over a year ago

I would just remove the events passing an array of ids and then render them again. You can call renderEvents passing an array so you don't have to loop through them.

Ally Murray Over a year ago

I've done something similar, from the server, it passes back a list of ids and a list of events and I just call removeEvents and renderEvents. It means you could make a single Ajax call too.

jones Over a year ago

I don't understand how 1 ajax call would be enough since im looping through to get attributes of all events and then add them to the database. Do you want to have the removeEvents and renderEvents functions calls inside the ajax succes call or where?

Ally Murray Over a year ago

You would still loop through to build your events array, at the point you make the Ajax call pass the array rather than one event at a time. Then from the server pass back a list of ids and a list of events, then call remove and render in the success. Have a look here to see how to pass the array from JavaScript to php: stackoverflow.com/a/5035796/3891834

|

jones · Accepted Answer · 2016-12-22 09:34:32Z

-2

So i've been struggling with this for some time now and finally found the best solution. For recurring events dont use the addEventSource function, it creates too much chaos with the callback function. Just create a for loop, define a new varr for event and add properties, use $('#calendar').fullCalendar('renderEvent',event,true) to add the event to calendar so it sticks and then use ajax() call to add the event to the database so when you refresh it stays.

id_mix = 0;
// TRAVERSE THROUGH TIME
for (loop = start_date.getTime(); (loop <= stop_date); loop = loop + (24 * 60 * 60 * 1000))
...
if (test_date.getDay() == event.start.day()) { // LOOK FOR DAY TO RECUR ON
    var myEvent = { // CREATE EVENT
           title: event.title,
           start: // formatted start date 
           id : id_mix
    }
    id_mix++;
    $.ajax({
         url: 'process.php',
         data: 'type=newR&title='+myEvent.title,
         type: 'POST',
         dataType: 'json',
         async: false,
        success: function(response){
            new_id = response.eventid;
                                },
        error: function(e){
            alert('error');
            console.log(e.responseText);
            }
        });
    myEvent.id = new_id; // GET ID FROM DATABASE, USE ASYNC = FALSE TO RETREIVE VALUE
    $('#calendar').fullCalendar('renderEvent',myEvent,true) // STICK TRUE IN CASE YOU SWAP VIEW


 ...

answered Dec 22, 2016 at 9:34

jones

6554 gold badges13 silver badges33 bronze badges

1 Comment

Honest Objections Over a year ago

You should have accepted the other answer. The person that helped you led you directly to this solution.

Collectives™ on Stack Overflow

"Uncaught TypeError: Cannot read property 'clone' of undefined" when adding recurring events to database

2 Answers 2

8 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related