CODEWITHSUNDEEP
javascriptjquerymagentoprototypejs
Jezen Thomas
Jezen Thomas

Reputation: 13800

jQuery conflicting with prototype in Magento

I have this jQuery in a Magento install:

jQuery(document).ready(function($) {
    "use strict";
    var firstItems = $('.item.first');
    // Find tallest .item per row; match rest of row to it
    firstItems.each(function($) {
        var $first, row, headings, heights, maxHeight;
        $first = $(this);
        row = $first.add($first.nextUntil(firstItems));
        headings = row.find("h2, h5");
        heights = headings.map(function($) {
            return $(this).outerHeight();
        });
        maxHeight = Math.max.apply(null, heights);
        headings.css("height", maxHeight);
    });
});

Sadly, it's conflicting with Prototype. It is throwing the error:

[object object] is not a valid argument for 'Function.prototype.apply'

This leads me to believe that the conflict is coming from line 15:

maxHeight = Math.max.apply(null, heights);

Is there any way that I can wrap that function differently so that it's ignored by prototype?

Upvotes: 3

Views: 1126

Answers (2)

Kamesh Jungi
Kamesh Jungi

Reputation: 6251

You can try :

 jQuery(function($){
      code_with_$;
 });

and 

(function($){
    code_with_$;
})(jQuery);

also you required to declare jQuery above prototype. (You can use page.xml to define position of jQuery above prototype.)Then use your jQuery code using above mentioned structure it will resolve your problem.

Upvotes: 0

Esailija
Esailija

Reputation: 140210

You are .applying a jQuery object, where as it should be an array.

    heights = headings.map(function($) {
        return $(this).outerHeight();
    }).toArray(); //<-- convert to array

Prototype the library doesn't add Function.prototype.apply, it's a native method.

Upvotes: 6

Related Questions