On a current project, the website was and many interactive jQuery “modules” where supplied by a 3rd party designer. We I pieced it together with ColdFusion everything worked great on IE8+, FF and Chrome. However it was soon discovered that a large customer of the client couldn’t upgrade past IE7 at the moment. After running the JavaScript through jsLint, that fixed the majority of the issues. Heck, just a couple of commas out of place will make a nightmare out of IE7.
However there was an issue that took me a whole day to figure out. (We’re talking thousands of lines of code to debug with no error being thrown).
As a general description, the site is a customized e-commerce site in its basic functionality. It has a category navigation tree to the left, with a product result grid to the right. When an item on the grid is clicked, the grid is hidden and replaced by a product detail section populated via AJAX.
First of all, there where around 1,500 categories that where populated into the DOM on page load via an un-ordered list. It was then converted into a cascading tree. The way you’re supposed to do it for accessibility and SEO purposes right? Well, IE7 didn’t take too kindly to that and took about a whole minute to display. IE8+ took probably around a second.
To resolve this issue I created a jQuery UI Widget via the Widget Factory. This required upgrading the version of jQuery being used, and I chose the latest one at 1.9.1 that still supported IE7.
After the tree was created and implemented, it became clear that only one product in the product grid was showing as opposed to the 15 for each page.
I determined that jQuery 1.7.2 loaded the grid as expected, but both 1.8 and 1.9 versions only loaded one. The method used to populate the grid was to clone a hidden div, populate it, append it to the parent container and make it visible using data from an AJAX JSON data set. It was looped via an $.each() method.
Because there where no errors being thrown, and I needed that newer version of jQuery I started the process of elimination. That process took me to the bitter end. I found that I couldn’t use multiple elements inside a selector. For example:
$('#myDIV1,#myDIV2').hide();
The above would inhibit all but one cloned container to be displayed. The workaround was to split up the selectors:
$('#myDIV2').hide();
$('#myDIV2').hide();
This would only happen in IE7. IE8+, FF, and Chrome worked just fine. It also only happened in jQuery 1.8+.
I could reproduce this any time, ripping out most of the app down to the essentials.
However at this time, creating a basic app in another virtual site works just fine. I may try to figure it out at a later time, but right now I can’t duplicate the issue.
But I’m writing this in case anyone runs into this edge case and needs a workaround. Hopefully I can find the cause and submit a bug to the jQuery team.
Chris Tierney 