Question

How do I extend an existing object method in jQuery?

For instance, I’m using jqBarGraph. Now I want to add an addGrid() function to it. I was thinking I’d do it like so:

(function($) {
  $.fn.jqBarGraph.addGrid = function(){
    var o = this;
    // do something with 'o'
    return o;
  }
})(jQuery);

…but when I call $('#chart').jqBarGraph(options).addGrid(); — I get the error:

Uncaught TypeError: Cannot call method 'addGrid' of undefined

Answer 1

You’re adding a property to the function, so you can really only access it as e.g.

$('#chart').jqBarGraph.addGrid();

which is not what you want. It seems like jqBarGraph does not return anything when called. You’d have to patch the function yourself like this:

(function(old) {
  $.fn.jqBarGraph = function() {
    old.apply(this, arguments);  // call the actual function

    // return something
    return {
      addGraph: function() { ... }
    };
  };

  $.fn.jqBarGraph.defaults = old.defaults;  // restore properties
})($.fn.jqBarGraph);