Call js method from jQuery function

Question

I want to call handleContextEdit method from eventRender function callback I have tried with this.handleContextEdit(event); but it is not working. Please help me out.

export default class FullCalendarJs extends LightningElement {
initialiseFullCalendarJs() {
  
  const ele = this.template.querySelector('div.fullcalendarjs');
 
  $(ele).fullCalendar({
    // this.calendar = new FullCalendar.Calendar(ele,{
    header: {
        left: 'prev,next, today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    //themeSystem:'bootstrap3',
    plugins: [ 'momentTimezone' ],
    defaultDate: moment(),
    
    navLinks: true, // can click day/week names to navigate views
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    events: this.programEventList,

   
    eventRender:function(event, element){
      var originalClass = element[0].className;
      element[0].className = originalClass + ' hasmenu';
      $(ele).contextMenu({
        selector: '.hasmenu', 
        callback: function(key, options,e) {
          
          this.handleContextEdit(event); //this is undefined here
        },
        items: {
            "view": {name: "View", icon: "view"},
            "edit": {name: "Edit", icon: "edit"}, 
            "delete": {name: "Delete", icon: "delete"},
            "sep1": "---------",
            "quit": {name: "Quit", icon: function(){
                return 'context-menu-icon context-menu-icon-quit';
            }}
        }
    });
    }
  });
  $(ele).fullCalendar('render');
}

handleContextEdit(event){
  console.log(event);
}
}

I want to call handleContextEdit method from eventRender function callback I have tried with this.handleContextEdit(event); but it is not working. Please help me out. Thanks!!

Where is `handleContextEdit` declared in your code? During the `callback` function where you'd used it, I would expect `this` to refer to `ele` (because of `$(ele)`. — ADyson, Mar 16 '20 at 21:04
handleContextEdit is declared at the end, handleContextEdit is another method of the class....yes, in callback this is refer to $(ele)., i want this should refer to current class — Ankit Dable, Mar 17 '20 at 04:17

score 0 · Answer 1 · answered Mar 21 '20 at 17:46

Try below code

this.handleContextEdit(event); might not contain the reference of the component,

Hence you create variable at the beginning to hold this context

In below example I have created a variable self

let self = this;

and the function call looks self.handleContextEdit(event); instead of this.handleContextEdit(event);

export default class FullCalendarJs extends LightningElement {
initialiseFullCalendarJs() {

const ele = this.template.querySelector('div.fullcalendarjs');

let self = this;
$(ele).fullCalendar({
// this.calendar = new FullCalendar.Calendar(ele,{
header: {
    left: 'prev,next, today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
},
//themeSystem:'bootstrap3',
plugins: [ 'momentTimezone' ],
defaultDate: moment(),

navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: this.programEventList,


eventRender:function(event, element){
  var originalClass = element[0].className;
  element[0].className = originalClass + ' hasmenu';
  $(ele).contextMenu({
    selector: '.hasmenu', 
    callback: function(key, options,e) {

      self.handleContextEdit(event); 
    },
    items: {
        "view": {name: "View", icon: "view"},
        "edit": {name: "Edit", icon: "edit"}, 
        "delete": {name: "Delete", icon: "delete"},
        "sep1": "---------",
        "quit": {name: "Quit", icon: function(){
            return 'context-menu-icon context-menu-icon-quit';
            }}
         }
        });
      }
   });
   $(ele).fullCalendar('render');
   }

  handleContextEdit(event){
    console.log(event);
  }
}

Call js method from jQuery function

1 Answers1