Uncaught TypeError: Object [object Object] has no method 'border'?

Question

This error has been driving me crazy ! Anyway, I have created a simple jQuery plugin that I called "border", but I get this error :

Uncaught TypeError: Object [object Object] has no method 'border'

For the record, jQuery is included only once, and it's included before my plugin.

I have used this to avoid conflicts :

<pre>
var $jq = $.noConflict();
//$.noConflict();
$jq("li").borderX('1px solid blue');
</pre>

EDIT :

This is my plugin's code :

jQuery(document).ready(function ($) {
    $.fn.borderX = function (params) {
        params = $.extend({width: 'null', color: 'null', radius: 'null'}, params);
        this.each(function () {
            var $t = $(this);
            var response = jQuery.parseJSON(params);
            if (typeof response == 'object') { //It is JSON
                if (params.width) {
                    $t.css('border-width:', params.width);
                }
                if (params.color) {
                    $t.css('border-color:', params.color);
                }
                if (params.radius) {
                    $t.css('border-radius:', params.radius);
                }
            } else {
                $t.css('border', params);
            }
        });
        return this;
    };
});

The HTML code from which I call the plugin named "borderX" is :

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.borderX.js"></script>
<script type="text/javascript">
var $jq = $.noConflict();
//$.noConflict();
$jq("li").borderX('1px solid blue');
</script>

EDIT °2 :

$.fn.border = function (options) {
    var params = $.extend({width: 'null', color: 'null', radius: 'null'}, options);
    this.each(function () {
        var $t = $(this);
        var response = jQuery.parseJSON(params);
        if (typeof response == 'object') { //It is JSON
            if (params.color) {
                $t.css('border-color:', params.color);
            }
            if (params.radius) {
                $t.css('border-radius:', params.radius);
            }
        } else {
            $t.css('border', params);
        }
    });
    return this;
};

Please post your plugin, called "border", you are calling borderX method. — undefined
I have actually changed the name to "borderX" and I get the same error. I've been calling "borderX". — devio
The error is not in the code above - it's in your plugin. Can we see the code for that? — Reinstate Monica Cellio
You didn't provide an ounce of code from your plugin. Two things pop to mind - you're not loading the plugin or you're not exposing your plugin to jQuery, therefore the method won't exist if jQuery doesn't "see" it. — N.B.

Reinstate Monica Cellio Reinstate Monica Cellio · Accepted Answer · 2013-04-16T13:24:07

Remove the 1st and last lines of your plugin so it's not wrapped in document.ready

(function($) {
    $.fn.borderX = function(params) {
        params = $.extend( {width: 'null', color: 'null', radius: 'null'}, params);
        this.each(function() {
            var $t = $(this);
            var response = jQuery.parseJSON(params);

            if(typeof response == 'object')
            { //It is JSON
                if(params.width){$t.css('border-width',params.width);}
                if(params.color){$t.css('border-color',params.color);}
                if(params.radius){$t.css('border-radius',params.radius);} 
            }
            else
            {
                $t.css('border',params);
            }
        });
        return this;
    };
})(jQuery);

Uncaught TypeError: Object [object Object] has no method 'border'?

1 Answers