Calling functions within prototype in jQuery plugin

Question

Trying to learn extendable jQuery plugin development. I'm completely stumped on how to call functions within a class from the jQuery plugin wrapper.

I created the wrapper for my code mostly from here, and have tried to understand/use this but haven't had much luck.

The important bits of the code below. I'd like it so I can call (eg) $(something).carousel(5) and it passes that number to the slide function within the Carousel class. Same for strings, so $(something).carousel('go') would run go within the Class.

How can I do this with this structure?

(function(window, $){

  var Carousel = function(elem, options){
    this.elem = elem;
    this.$elem = $(elem);
    this.options = options;
  };

  Carousel.prototype = {

    defaults: {
     [...]
    },

    init: function() {
      this.config = $.extend({}, this.defaults, this.options);
      this.create();
      return this;
    },
    create: function() {
       [...]
    },
    slide: function(num) {
       [...]
    }
  };

  Carousel.defaults = Carousel.prototype.defaults;

  $.fn.carousel = function(options) {
    return this.each(function() {

      var carousel = new Carousel(this, options);
      if (!options || typeof options == 'object') carousel.init();
      else if (typeof options == 'number') carousel.slide(options);
      else if (typeof options == 'string') carousel.options;

    });
  };

  window.Carousel = Carousel;

})(window, jQuery);

bokonic · Accepted Answer · 2013-05-26 14:56:42Z

1

You're more or less on the right track, your main problem is that calling carousel.options will just access the options attribute of your Carousel instance. What you want to do is dynamically call the function on the instance:

 $.fn.carousel = function(options) {
    return this.each(function() {

      var carousel = new Carousel(this, options);

      // do a loose comparison with null instead of !options; !0 == true
      if (options != null || typeof options === 'object')
        carousel.init();
      else if (typeof options === 'number')
        carousel.slide(options);
      // make sure options is the name of a function on carousel
      else if (typeof options === 'string' && typeof carousel[options] === 'function') {
        carousel[options](); // call the function by name
      }

    });
  };

answered May 26, 2013 at 14:56

bokonic

1,77110 silver badges12 bronze badges

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

5 Comments

Tom Maitland Over a year ago

Thanks @bokonic! That's got the functions going, but not the one where I'm trying to pass the number to the slide function with either carousel.slide(options) or carousel.slide[options](). Any ideas?

bokonic Over a year ago

you're missing a comma after the closing } in your definition of create (right before slide) in the Carousel prototype.

Tom Maitland Over a year ago

Eh that was a typo just when I pasted the code into the question, it's got the comma in the full thing.

bokonic Over a year ago

not sure from the code you posted; try console.log(carousel) and see if the the prototype contains the slide method (seems like it doesn't); something is likely wrong with the function definition.

Tom Maitland Over a year ago

weird.. I did a console.log and slide was included in it. I copied the entire script as it currently is (incomplete) into a JSFiddle if it'd help can set up the HTML too. I seem to be getting an error for both like TypeError: Cannot read property 'slide' of undefined now, and TypeError: Cannot read property 'activeClass' of undefined

Collectives™ on Stack Overflow

Calling functions within prototype in jQuery plugin

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related