This seems to be a problem a lot of people have run into! Link to google search results

There are a lot of answers, I've looked into some of the more reasonable ones, and fixed any javascript errors on the page. In Chrome I'm not picking up any errors but In IE8 I'm getting invalid argument on line 205 error and the state drop down is missing. I'm not a javascript expert and don't know where to begin troubleshooting this issue. Especially when it es down to browser specifics.

Screenshot of problem

If you look at line 205 in the JS the missing field as it includes:

if (this.regionSelectEl.options.add) {
        this.regionSelectEl.options.add(option);
} else {
        this.regionSelectEl.appendChild(option);
}

Which happens to be the region(state) select element that is missing from the page. A link to the JS: /

What might be causing this?

Edit:

I've found the cause to be a conflict with a stripped down latest version of modernizer, I'm using modernizer for the html5 polyfills. Still trying to debug the conflict.

This seems to be a problem a lot of people have run into! Link to google search results

There are a lot of answers, I've looked into some of the more reasonable ones, and fixed any javascript errors on the page. In Chrome I'm not picking up any errors but In IE8 I'm getting invalid argument on line 205 error and the state drop down is missing. I'm not a javascript expert and don't know where to begin troubleshooting this issue. Especially when it es down to browser specifics.

Screenshot of problem

If you look at line 205 in the JS the missing field as it includes:

if (this.regionSelectEl.options.add) {
        this.regionSelectEl.options.add(option);
} else {
        this.regionSelectEl.appendChild(option);
}

Which happens to be the region(state) select element that is missing from the page. A link to the JS: http://jsfiddle/bms85/LKdsq/1/

What might be causing this?

Edit:

I've found the cause to be a conflict with a stripped down latest version of modernizer, I'm using modernizer for the html5 polyfills. Still trying to debug the conflict.

• javascript
• forms
• internet-explorer
• magento

• Few questions: which version of Magento? Which country do you have as the default country? Does this occur with the default skin? – CCBlackburn Commented Apr 24, 2012 at 22:24
• @CCBlackburn Thanks for the reply I'll answer your questions here and append the post. I'm running Magento enterprise ver. 1.11.1.0. The default country is set to USA, and no this isn't occurring with the default skin. – Front_End_Dev Commented Apr 24, 2012 at 23:38
• Ok, I would go through your local.xml file and put each bit back in, one at a time to identify what's triggering the issue. I'm not sure why it would only be occurring in IE...with IE who knows why things happen. – CCBlackburn Commented Apr 25, 2012 at 0:06
• @CCBlackburn It's modernizer. I'm using a stripped down version for the html5 polyfills. unfortunately they're really important. – Front_End_Dev Commented Apr 25, 2012 at 0:35

4 Answers 4

I was running into this issue with a Magento/Modernizr site as well, and Brendan Falkowlski's answer pointed me to a solution. Since his answer, Modernizr has released 2.6.x which updates html5shiv to 3.6, which includes a fix for the particular issue. So if you're running into this and using a pre-2.6 modernizr, updating to the latest (using its bundled html5shiv) should fix the problem.

To be cross-browser patible you should do

this.regionSelectEl.options[this.regionSelectEl.options.length] = new Option(option.text, option.value);

The forms.js in Magento conflicts with Modernizr (when the HTML5shiv is included) in IE8 (possibly lower too — did not test). Pages with form validation will show error messages.

The fix:

Instead of loading HTML5shiv inside Modernizr, download html5shiv.js separately from: https://github./aFarkas/html5shiv

Use this Layout XML to add a conditional ment that only serves the shiv to IE8 and lower:

<action method="addItem"><type>skin_js</type><name>js/html5shiv.js</name><params/><if>lte IE 8</if></action>

Then you can build your custom Modernizr package and include it as well. Since all browsers get the Modernizr script this has a nice side effect of lightening the script for modern browsers.

Note: this puts an extra burden on IE8 users by forcing them to download extra scripts, but it's better than letting them see errors.

As it turns out IE doesn't like the options.add:

            if (this.regionSelectEl.options.add) {
                this.regionSelectEl.options.add(option);
            } else {
                this.regionSelectEl.appendChild(option);
            }

I simply used appendClild instead.

            if (this.regionSelectEl.options.length > 0 && option.value.length > 0 && option.text.length > 0 && this.regionSelectEl.options.add) {
                //~ this.regionSelectEl.options.add(option);
                this.regionSelectEl.appendChild(option);
            } else {
                this.regionSelectEl.appendChild(option);
            }