Serious problem with OutSystems 8.0, jQuery 1.4.2 OS, and Internet Explorer

Serious problem with OutSystems 8.0, jQuery 1.4.2 OS, and Internet Explorer

  
My company is in the process of upgrading all our environments from 7.0 to 8.0. We had upgraded our DEV and QA environments and were about to begin upgrading UAT and PROD until we spotted something weird: one particular page on a website was not rendering its theme in OutSystems 8.0, but it still looked correct in 7.0. What was even weirder was the problem was always reproducible in Internet Explorer, but never any other browser.

The problem, as I discovered, was due to a combination of several factors:
1. Internet Explorer only accepts the first 31 linked stylesheet (CSS) files on a page. All others after that are ignored. http://support.microsoft.com/kb/262161
2. There is an issue (a bug?!) with the current version of OutSystems 8.0 in how it deals with jQuery 1.4.2 OS, which is what any eSpace would still be using by default after an upgrade. The problem is with certain RichWidgets controls (Popup_Editor, Popup_InfoBalloon, and possibly others) when the eSpace is set to use jQuery 1.4.2 OS. For _each_ of certain RichWidgets controls rendered on a page, OutSystems injects a link to the same stylesheet in the HTML source--even if this stylesheet has already been linked!! For instance, if there happen to be 10 Popup_InfoBalloon controls on the page, say from a Table Records with 10 rows, the stylesheet will be linked 10 times in the page source:

<link rel="stylesheet" type="text/css" href="/RichWidgets/jQueryUICompatibility.css">
<link rel="stylesheet" type="text/css" href="/RichWidgets/jQueryUICompatibility.css">
<link rel="stylesheet" type="text/css" href="/RichWidgets/jQueryUICompatibility.css">
<link rel="stylesheet" type="text/css" href="/RichWidgets/jQueryUICompatibility.css">
<link rel="stylesheet" type="text/css" href="/RichWidgets/jQueryUICompatibility.css">
<link rel="stylesheet" type="text/css" href="/RichWidgets/jQueryUICompatibility.css">
<link rel="stylesheet" type="text/css" href="/RichWidgets/jQueryUICompatibility.css">
<link rel="stylesheet" type="text/css" href="/RichWidgets/jQueryUICompatibility.css">
<link rel="stylesheet" type="text/css" href="/RichWidgets/jQueryUICompatibility.css">
<link rel="stylesheet" type="text/css" href="/RichWidgets/jQueryUICompatibility.css">

As you can see, this is _highly_ undesirable and greatly handcuffs a developer from being able to make reasonable use of these RichWidgets and have the page render correctly in Internet Explorer.

I did discover that selecting jQuery 1.8.3 for each eSpace does not create the links to the jQueryUICompatibility stylesheet, which is good, but this requires us to update every eSpace on all our web sites and retest and redeploy everything to complete our 8.0 upgrade.

Would this be considered a bug? I would think that OutSystems should check that the stylesheet has already been linked once instead of adding a link to the same stylesheet for every RichWidgets control on a page that requires the stylesheet be loaded.
This issue has been identified and will be corrected in the next release of the OutSystems Platform 8 which is due to be released in the end of June.

If you require an immediate fix for this matter, please contact OutSystems Support (support@outsystems.com).
Ricardo, thanks for the quick reply.

We are in the process of pushing the jQuery 1.8.3 switch along with the 8.0 upgrade.

However, I am sure that a fix for this issue will be very helpful to other people who encounter this problem with an 8.0 upgrade.
Well done Daniel,
Really nice catch and with all the scenario identified.
And the Outsystems Support always responding "ASAP" :)