Concept of jquery plugin methods

Question

I'm just starting of by making my own jquery plugins. I still havent wrapped my head around the concept of working with them and adding methods in the plugin and my recent attempt is failing and i dont know why. In this case bellow I got my regular piece of code i use to perform a capFirst and i want to transform that to the plugin..

HTML

<div id="contain">
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="text" />
</div>

Original jquery

function capitaliseFirstLetter(string)
{
    return string.charAt(0).toUpperCase() + string.slice(1);
}

$('#contain > input').keyup(function(){
    var $this = $(this);    
    $this.val(capitaliseFirstLetter($this.val()));
});

My try of plugin code

    (function($) {

    $.fn.capFirst = function () {        
            $(this).keyup(function(){
                var $this = $(this);    
                $this.val(methods.capitaliseFirstLetter($this.val()));
            });      
    };

    var methods = function () {       
        capitaliseFirstLetter: function(inputValue) {
              return inputValue.charAt(0).toUpperCase() + inputValue.slice(1);  
        } 
    };

})(jQuery);

$('#contain > input').capFirst();

jsfiddle: http://jsfiddle.net/ypWTd/118/

UPDATE
working solution in jsfiddle: http://jsfiddle.net/ypWTd/163/

Answer 1

The problem is caused by the following section:

var methods = function () {       
    capitaliseFirstLetter: function(inputValue) {
          return inputValue.charAt(0).toUpperCase() + inputValue.slice(1);  
    } 
};

This actually causes a SyntaxError. You seem to mixing up the syntax between that required for an object literal, and that required for a "class" (an instance of which would need to be created with the new operator). If you just make it an object literal, rather than a function, it will work:

var methods = {       
    capitaliseFirstLetter: function(inputValue) {
          return inputValue.charAt(0).toUpperCase() + inputValue.slice(1);  
    } 
};

Here's an updated fiddle .

Also note that in your plugin method, this is already an instance of jQuery so you don't need to pass it in to jQuery again:

 $(this).keyup(function() {  //$(this)...
 this.keyup(function() { //Can just be this

Update

The other way (using a function instead of an object literal) would go something like this:

$.fn.capFirst = function () {
    this.keyup(function(){
        var $this = $(this),  
            m = new methods(); //Create an instance of methods
        $this.val(m.capitaliseFirstLetter($this.val())); //Call the method
    });                  
};
var methods = function() {       
    this.capitaliseFirstLetter = function(inputValue) {
          return inputValue.charAt(0).toUpperCase() + inputValue.slice(1);  
    } 
};

Here's an example of that version.

Answer 2

The only obvious difference is the double $($()) you are using for "this". Did you ever try to remove one of those $()?

Second: Usually you should "return this" to enable chaining.

Third: Usually you should provide support for multiple element selectors by using .each() inside the plugin

this.each(function() {
   $(this).keyup(...);
})

Fourth: You are trying to access a method of a class without using the "new" operator first. Either you should do

var myObject = {method: function() {...}}

myObject.method();

or you should instantiate the object first

var myObject = function() {
    function method() {
    }
}

var myInstance = new myObject();
myInstance.method();

Answer 3

This is how your plugin should be

jQuery.fn.capFirst = function () {
    $(this).keyup(function(){ 
        inputValue = $(this).val();
        inputValue = inputValue.charAt(0).toUpperCase() + inputValue.slice(1);
        $(this).val(inputValue);
    });                        
};

jQuery(function() {
    $('#contain > input').capFirst();   
});

Check out the updated jsFiddle

Answer 4

(function($) {

    $.fn.capFirst = function () {
        return this.keyup(function() { // Returning the elements to maintain chainability
            var $this = $(this);    
            $this.val(methods.capitaliseFirstLetter($this.val()));
        });                  
    };

    var methods = { // Made this an object/array instead of a function that didn´t return anything.
        capitaliseFirstLetter: function(inputValue) {
            return inputValue.charAt(0).toUpperCase() + inputValue.slice(1);  
        } 
    };

})(jQuery);

$(document).ready(function() { // Selectors should not be used before the DOM is ready.
    $('#contain > input').hide().capFirst().show().css('color', 'blue'); // Demo. chainability
});

jQuery documentation contains some good information about Plugins/Authoring .

You´ll find my complete edit here .