newbie jQuery plugin issue

Question

Hi-

I'm just getting into jQuery plugins and I wanted to do a sort of 'hello world' exercise with a barebones object-oriented plugin template. But I can't get the console.log statement in the setup() function below to display in a firebug console window.

I call the plugin like so:

<script type="text/javascript" src="myPlugin.js" >
<script type="text/javascript"> 
  $(document).ready() {
    $('ul').myPlugin();
  });
</script>

myPlugin.js:

;(function($) {

  $.fn.extend({
   myPlugin: function(options) {
    return this.each(function() {
     new $.MyPlugin(this, options);
    });
   }
  });

  $.MyPlugin = function(element, options) { 
   var defaults = {   
    helloText: "hello World"   
   }

   this.options = $.extend({}, defaults, options || {}); 

   this.setup();  
  };

  $.extend($.MyPlugin.prototype, {

 setup: function() {
  console.log(this.helloText);  
 } 
  }); 
})(jQuery);

Like I said, the console.log statement in the setup() function doesn't display. I have no idea why. However, if I put a console.log statement immediately following the top line, for example, it does work:

;(function($) {
  console.log('hello world');

.....Can someone please tell me what I'm doing wrong?

Answer 1

Your call is incorrect:

<script type="text/javascript" src="myPlugin.js"></script>
<script type="text/javascript"> 
    $(document).ready(function(){
        $('ul').myPlugin();
    });
</script>

Answer 2

Ambrosia points out the issue you asked about, as your call was incorrect. Your .ready() didn't contain the function.

However, you might want to consider setting up your plugin a little differently. Right now no one can override your defaults on a global basis, and your use of .extend obscures what you are trying to do. This is how I would recommend setting up your plugin, but of course, everyone does it differently:

;(function($) {

  $.fn.myPlugin = function(options) {
     return this.each(function() {
       (new $.MyPlugin(this, options));
     });
  };

  $.MyPlugin = function(element, options) {     
     this.options = $.extend({}, $.MyPlugin.defaults, options); 

     this.setup = function(){
       console.log(this.helloText);
     };

     this.setup();         
  };

  $.MyPlugin.defaults = {                      
     helloText: "hello World"                      
  }; 

})(jQuery);

In addition to being easier to follow, someone can now override your options for all the calls to the plugin by using this:

$.MyPlugin.defaults.helloText = "Something Else";
$('ul').myplugin(); // Outputs 'Something Else' to the console

I have written a helper for jQuery Plugins called Starter for jQuery but there are tons of other great resources out there.