JQuery function present but saying method undefined

Question

I am relatively new to Jquery and so accept that the answer could be pretty obvious. I have a plugin that provides a function, but when I run my program I get the console error:

Cannot call method 'createEvent' of undefined 

Like I said I have probably missed something simple but I cannot find what. The var desiredValue is, of course, retrieving the correct data and I have ensured the plugin is linked correctly in the header. If anyones got any advice they can give that would be very much appreciated! Thanks.

function createEvent(title,location,notes, startDate, endDate){
  var title= "My Appt";
  var location = "Los Felix";
  var notes = "me testing";
  var startDate = "2012-11-23 09:30:00";
  var endDate = "2012-11-23 12:30:00";

  cal.createEvent(title,location,notes,startDate,endDate);
}

var cal;

$(document).ready(function() {
  cal = window.plugins.calendarPlugin;


  $('.calinfo').live('click', function() {    
    var desiredValue = $(this).parent().prev().find('.calendar').val();                                                
    var calInfo = desiredValue.split(',');

    createEvent(calInfo[0], calInfo[1], calInfo[2], calInfo[3], calInfo[4]);
  });                              
});    

Answer 1

Place a debug point after the cal assignment. The problem is this line of code within your function:

cal.createEvent(title,location,notes,startDate,endDate);

cal is undefined in that context and scope.

I have a feeling that

cal = window.plugins.calendarPlugin;

is not assigned correctly.

... thanks for the link (see comments) -- @Ohgodwhy.

That plugin isn't written very well, honestly. But, what you should do is just edit the first line of your function:

window.plugins.calendarPlugin.prototype.createEvent = function(title,location,notes, startDate, endDate){

Whenever you call the function just use cal.createEvent (you'll need to edit the click event handler as such.

This is going to sound stupid but... are you sure the plugin JS file was included and executed before this script? If you're including the plugin (calendar plugin javascript file) after this script executes, the calendarPlugin object won't exist (hence, it will remain undefined)!

Answer 2

It is a scope issue which is preventing the var cal from being hoisted to the top. Move your function declaration within the ready function. You're also getting undefined because you're calling createEvent as a method of cal but you haven't created a class object.

$(document).ready(function() {
    var cal;
    cal = window.plugins.calendarPlugin;

    $('.calinfo').live('click', function() {
        var desiredValue = $(this).parent().prev().find('.calendar').val();
        var calInfo = desiredValue.split(',');

        createEvent(calInfo[0], calInfo[1], calInfo[2], calInfo[3], calInfo[4]);
    });

    function createEvent(title, location, notes, startDate, endDate) {
        var title = "My Appt";
        var location = "Los Felix";
        var notes = "me testing";
        var startDate = "2012-11-23 09:30:00";
        var endDate = "2012-11-23 12:30:00";

        cal.createEvent(title, location, notes, startDate, endDate);
    }

});​