Case of the Quirky CreateElement and the Empty Drop-Down List

I am not a web developer, but sometimes old school websites (i.e. IE6 days) stand in the way of deploying new operating systems and technical progress. So even if you’re not a developer some basic web debugging skills are very useful.

So I was at Tullamarine (Melbourne) Airport today and my 3G speeds where just unbelievably bad so I thought I’d try the Qantas access point…

I was using Windows Developer Preview and connected to access point OK. However the page to enter credit card just did not work, no expiry date was selectable:

clip_image003

And  no, this wasn’t some gadget purchase prevention software installed by my wife…

Right clicking the page I selected View Source

clip_image005

So these are lists that must get populated at runtime…now to help debug this we’ll hit F12 to get the Developer Toolbar, available in IE9 and later.

I selected the Scripts tab and searched for CreditCardExpiryMonth

clip_image007

I then searched for this function InitializeComplete

clip_image009

So I selected InitializeDom();  at the beginning of Initialize function and hit F9 to set a breakpoint there. I then hit Start Debugging

clip_image010

OK so we stop at my breakpoint so we know the Initialize() function is executing. I hit F5 after the breakpoint to keep going…

clip_image012

Mouse over the el we can see why:

The site is trying to createElement with embedded HTML control characters. As IE9 and later operate in standards mode by default this is not allowed…

clip_image014

Of course if you had checked the IE9 compatibility cookbook you would have known this already, with example on how to fix such code:

http://msdn.microsoft.com/en-us/library/ff986077(v=vs.85).aspx

For the IE10 developers guide refer here http://msdn.microsoft.com/en-us/library/hh673549(v=vs.85).aspx

If you didn’t use the debugger you could also enable breaking on script errors, which is disabled by default. (try browse the internet with that setting and you’ll quickly realize why it’s disabled by default)

clip_image015

In this case the page from user’s point of view can be fixed by clicking compatibility view icon in address bar

image

From a system administrators point of view if we couldn’t get the website updated we could deploy the compatibility view setting via group policy.

Some other freely available IE compatibility tools you can use if developing/testing sites:

About chentiangemalc

specializes in end-user computing technologies. disclaimer 1) use at your own risk. test any solution in your environment. if you do not understand the impact/consequences of what you're doing please stop, and ask advice from somebody who does. 2) views are my own at the time of posting and do not necessarily represent my current view or the view of my employer and family members/relatives. 3) over the years Microsoft/Citrix/VMWare have given me a few free shirts, pens, paper notebooks/etc. despite these gifts i will try to remain unbiased.
This entry was posted in Application Compatibility, Internet Explorer, Windows 7 and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s