Question

My script is throwing an error only in IE8. I’m using Mootools 1.3.

The error thrown is:

Object doesn’t support this property/method.

The IE8 debugger is telling me that the error is this (line with **):

append: function(original){
    for (var i = 1, l = arguments.length; i < l; i++){
        var extended = arguments[i] || {};
        **for (var key in extended) original[key] = extended[key];**
    }
    return original;
}

The above code is around line 380 in the uncompressed version. It’s part of Object.extend.

Now I am suspecting this is happening when I do a each on an array like object. This is the code I’m suspecting is triggering this:

var self = this,
    c = certManager.addedCerts,
    e = window.expManager.workExp,
    cA = this.cA = [],
    eA = this.eA = [];
    c.each(function(x){
        cA.push(x.value);
    });
    e.each(function(x){
        eA.push(x.retrieve('info'));
    });

The first array (c) is populated with numbers only. The second one (e) is populated with objects that have a store/retrieve going on.

The array like objects are declared like so:

addedCerts = this.addedCerts = []

workExp = this.workExp = []

in their respective modules (certManager & expManager).

Does anyone has any idea why this is happening?

EDIT:

As requested, here’s how workExp is populated:

var r = $('resumeContent'),
                h = "<div class=\"contentRowRight\"><a href=\"#\" class=\"xHover remove\" > </a><br/>" + yV + " " + mV + "</div><strong>" + pV + "</strong><br />" + cV,
                n = new Element('div', {html: h, 'class': 'contentRow'}).inject(r, 'top');
            n.getElement('.remove').addEvents({
                'click': function (e) {
                    e.preventDefault();
                    self.removeExp(this);
                },
                'mouseover': function(){
                    var el = this;
                    this.store('mO', true);
                    (function() {
                        if (el.retrieve('mO')){
                            el.fieldToolTip('Remove Experience',false,false);
                            el.store('mO', false);
                        }
                    }).delay(500);
                },
                'mouseout': function(){
                    this.store('mO', false);
                    this.removeToolTip();
                }
            });
            n.store('info', {'p': pV, 'c': cV, 'y': yV.replace(' year', '').replace('s', '').replace(' and', ''), 'm': mV.replace('month', '').replace('s', '')});
            this.workExp[this.workExp.length] = n;

What I have going on is part of a form. I have a few fields inside a form, you fill them in and then click the Add button and it creates a new ‘row’. Those rows contain information about a users work experience. Once the user as added all his work experience, he can keep filling the form. Once the form is all filled out, I iterate over the array object and transform the values into a JSON object which I then put in a hidden value and pass it to the back end.

If you guys want to see the script in action, you can visit http://www.oilforce.com/user-signup.php. You will be forced to fill the first page which is personal info (you can type in garbage, it’s not like you’re gonna submit it anyways) and then press next 3 times. On the fourth page, the work experience form is there. That’s what the code above is doing.

Answer 1

The error was stemming from a field I had in my form. The id of the field was ‘position’ which apparently clashed with something in ie8. Renamed my field to ‘pos’ and everything seems to work now.