$.extend is not a function

Question

I'm trying to integrate the svg edit - editor, which is using jQuery, into Magento. The problem is that Magento uses Prototype, and therefore I'm using the jQuery.noConflict(); method. Everything is fine until if I call the editor via function then Firebug throws the following errors:

$.extend is not a function

if(config) {
   $.extend(curConfig, config);
} 

$.isArray is not a function

} else if($.isArray(key)) {

The error occurs at line 59 and 121 in svgcanvas.js. I hope someone with more experience in using jquery and prototype can help me with this problem.

Answer 1

Try: jQuery.extend(curConfig, config);

Answer 2

try to put your function attr into

(function( $ ){


})( jQuery );

so it will look like

(function( $ ){
jQuery.fn.attr = function(key, value) {
    var len = this.length;
    if(!len) return this;
    for(var i=0; i<len; i++) {
        var elem = this[i];
        // set/get SVG attribute
        if(elem.namespaceURI === svgns) {
            // Setting attribute
            if(value !== undefined) {
                elem.setAttribute(key, value);
            } else if($.isArray(key)) {
                // Getting attributes from array
                var j = key.length, obj = {};

                while(j--) {
                    var aname = key[j];
                    var attr = elem.getAttribute(aname);
                    // This returns a number when appropriate
                    if(attr || attr === "0") {
                        attr = isNaN(attr)?attr:attr-0;
                    }
                    obj[aname] = attr;
                }
                return obj;

            } else if(typeof key === "object") {
                // Setting attributes form object
                for(var v in key) {
                    elem.setAttribute(v, key[v]);
                }
            // Getting attribute
            } else {
                var attr = elem.getAttribute(key);
                if(attr || attr === "0") {
                    attr = isNaN(attr)?attr:attr-0;
                }

                return attr;
            }
        } else {
            return proxied.apply(this, arguments);
        }
    }
    return this;
};


})( jQuery );

Answer 3

try

var k = jQuery.noConflict();

then your call uses k instead of $.

Answer 4

did you change the jQuery namespace with noConflict. You seem to be still using $ to invoke the func. Change the Jquery namespace using the noConflict approach to something like $$ or maybe jQ then invoke your method like jQ.extend instead of $.extend..