$.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.

The problem is (as far as I can see from the [source code](http://code.google.com/p/svg-edit/source/browse/trunk/editor/svg-editor.js)), that the editor directly accesses the **global** `$` (instead of aliasing the global `jQuery`). Only calling `jQuery.noConflict();` does not help you here, it seems you have to adjust the source. — Felix Kling, Aug 23 '11 at 09:09

score 5 · Answer 1 · answered Aug 23 '11 at 09:07

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 );

$ will be stolen from prototype :( he's facing a classical prototype and jquery conflict — Anton S, Aug 23 '11 at 09:12
@Anton S: No... $ will be limited to the anonymous function scope, and it will get passed the jQuery object... What genesis is doing is a very common trick to avoid framework conflicts. — Daniel Sloof, Aug 23 '11 at 09:15

score 4 · Answer 2 · answered Aug 23 '11 at 09:06

4

try

var k = jQuery.noConflict();

then your call uses k instead of $.

answered Aug 23 '11 at 09:06

score 4 · Accepted Answer · edited Apr 14 '12 at 13:25

4

Try: jQuery.extend(curConfig, config);

edited Apr 14 '12 at 13:25

Adrian Toman

11,316
5
48
62

answered Aug 23 '11 at 09:16

k.honsali

726
2
9
21

Thank you all for quick reply, after replacing all **$.** with **jQuery.** and **$(** with **jQuery(** the errors disappeared. I really did not want to do it this way but it seems to me to be the easiest and fastest way to nearly 4000 lines of code. THX! – ThreeCheeseHigh Aug 23 '11 at 10:03

score 1 · Answer 4 · answered Aug 23 '11 at 09:12

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..

$.extend is not a function

4 Answers4

Linked