Magento – Error in Prototype.js

ee-1.13errorjavascriptpayment-gatewayprototype-js

I'm using the HelloResponsive EE theme on a Magento 1.13 EE deployment.

In setting up an extention for the eWAY gateway, I was told there was an error in the Prototype.js file that was interfering with the JSON post.

Uncaught TypeError: Object.keys called on non-object prototype.js:126
addMethods prototype.js:126 create prototype.js:115 (anonymous
function) wishlist.js:38

for (var i = 0, length = properties.length; i < length; i++)
  klass.addMethods(properties[i]);

The custom theme does use JQuery as well, so this may be a conflict issue. But when I try moving the JQuery call before the Prototype call, the JQuery functions stop working.

Can anyone help explain

  1. whether or not the error is related to the Prototype / JQuery
    conflict (I am using a noConflict script) and
  2. how best to fix this?

Here's the code in Wishlist.js, starting at line 38:

Enterprise.Wishlist.Widget.Form = Class.create(Enterprise.Widget, {
action: null,
isValid: false,

initialize: function($super, action) {
    var _templateString = '<ul class="form-list">' +
            '<li><label for="wishlist-name">' + Translator.translate('Wishlist Name') + '</label><div class="input-box"><input type="text" id="wishlist-name" maxlength="255" class="input-text required-entry validate-length maximum-length-255" name="name"/></div>' +
            '<li class="control"><div class="input-box"><input type="checkbox" id="wishlist-public" name="visibility"></div><label for="wishlist-public">' + Translator.translate('Make This Wishlist Public') + '</label></li>' +
        '</ul>' +
        '<div class="buttons-set form-buttons"><button type="submit" class="button btn-save"><span><span>' + Translator.translate('Save') + '</span></span></button><button type="button" class="button btn-cancel"><span><span>' + Translator.translate('Cancel') + '</span></span></button></div>';

You're help is greatly appreciated!

Best Answer

It would be helpful to see the code in and around line 38 in wishlist.js, as that's where the "real" error is triggered.

(anonymous function) wishlist.js:38

The code you've linked is Prototype JS framework code, and the problem is something dodgey was passed into the framework code.

Additionally, most Prototype JS/jQuery conflicts are cause by not being in "noConflict" mode (even though you think you are). Try opening a javascript console window and checking the value of $. If it's something like this

> $
function (a,b){return new e.fn.init(a,b,h)}

Then jQuery has rewritten the value of $, and you're not in no conflict mode. If it's more like this

> $
function $(element) {
  if (arguments.length > 1) {
    for (var i = 0, elements = [], length = arguments.length; i < length; i++)
      elements.push($(arguments[i]));
    return elements;
  }
  if (Object.isString(element))
    element = document.getElementById(element);
  return Element.extend(element);
}

Then jQuery is correctly in no conflict mode, so that's probably not the problem.

Update: Based on the code sample provided, my guess the Enterprise.Widget variable defined in 

Enterprise.Wishlist.Widget.Form = Class.create(Enterprise.Widget, {

isn't defined before it's used. Inheritance in Prototype JS's class system works by itterating over methods on the base class-object and adding them to the new class object (the new class object here is Enterprise.Wishlist.Widget.Form). I'd check that Enterprise.Widget is defined before being used with alert or console calls

alert(Enterprise.Widget);
alert(Enterprise);

console(Enterprise.Widget);
console(Enterprise);

Enterprise.Wishlist.Widget.Form = Class.create(Enterprise.Widget, {

If it's not, then your problem is either

  1. The javascript class file which defines Enterprise.Widget isn't being included in a script tag

  2. The javascript class file which defined Enterprise.Widget is being included, but it's being included after wishlist.js.

Related Topic