[SalesForce] Lightning – TypeError: this.createAppointment is not a function

Been stuck on this for a while, cant figure out why my upsert method is not being called! Im using lightning, Can you help?

The line where i get the error is : 

this.createAppointment(component, updateAppointment);

I have used a function further up the page, which works no problem. 

defaultDate: this.processDate(), //'2016-01-01',

Helper Code

({
loadCal : function(component, appointmentsList){

    var arrayLength = appointmentsList.length;
    //alert(appointmentsList);
    var eventsList = [];
    for (var i = 0; i < arrayLength; i++) {
        {
            eventsList.push({
                Id: appointmentsList[i].Id,
                title: appointmentsList[i].Name,
                start: appointmentsList[i].risetest__Date__c + 'T' + appointmentsList[i].risetest__Start_Time__c + ':00',
                end: appointmentsList[i].risetest__Date__c + 'T' + appointmentsList[i].risetest__End_Time__c + ':00'
            });
        }
    }

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek ,agendaDay'
        },
        defaultDate: this.processDate(), //'2016-01-01',
        editable: true,
        eventDrop: function(event, delta, revertFunc) {
            //alert(event.Id + " was dropped on " + event.start.format());
            var updateAppointment ;

            if (confirm("Are you sure about this change?")) {
                try {
                    console.log(event);
                    var tempNewDate = event.start._d;
                    console.log(  tempNewDate.getFullYear() + '-' + ('0' + (tempNewDate.getMonth()+1)).slice(-2) + '-' + ('0' + tempNewDate.getDate()).slice(-2));

                    var tempObject = {
                        Id: event.Id,
                        risetest__Date__c : tempNewDate
                    }
                    console.log(tempObject);

                    component.set("v.appointment", tempObject);

                    updateAppointment = component.get("v.appointment");
                    console.log(updateAppointment);

                    this.createAppointment(component, updateAppointment);

                }catch(err) {
                    console.log(err);
                }
            }

        },
        eventClick: function(calEvent, jsEvent, view) {

            alert('Event: ' + calEvent.Id);

        },
        eventLimit: true, // allow "more" link when too many events
        events: eventsList
    });
},

createAppointment: function(component, appointment) {
this.upsertAppointment(component, appointment, function(a) {
    var Appointments = component.get("v.Appointment");
  });
},

upsertAppointment : function(component, a, callback) {
    var action = component.get("c.saveAppointment");
    action.setParams({ 
        "appobj": a
    });
    if (callback) {
      action.setCallback(this, callback);
    }
    $A.enqueueAction(action);
},

processDate : function(dt){
    var MyDate = new Date();
    var MyDateString;
    MyDateString = MyDate.getFullYear() + '-' + ('0' + (MyDate.getMonth()+1)).slice(-2) + '-' + ('0' + MyDate.getDate()).slice(-2);
    return MyDateString;
}
})

Best Answer

You need to use function.bind() to generate a method with a captured this value (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind).

You also need to use $A.getCallback() to capture the current access level (see https://releasenotes.docs.salesforce.com/en-us/winter16/release-notes/rn_lightning_get_callback.htm). Without this your subsequent use of cmp.get() and cmp.set() will fail.

Try with this code

`$('#calendar').fullCalendar({
  ...
  eventDrop: $A.getCallback(function(event, delta, revertFunc) {
      ...
  }.bind(this)), 
  ...
});`
Related Topic