Script freezes IE unless in Compatibility View

Question

The goal is to use a grid control in a web resource on a form in CRM. I decided on KoGrid because it could be easily bound to the knockout view model we already had in place. The trouble is using KoGrid in a CRM context causes IE 9 to stop responding entirely. There are no exceptions or errors logged in the console; the only symptom is the browser locking up.

Putting the browser in compatibility mode fixes the issue, unfortunately in IE 9 doctypes are inherited so we can't control the render mode of the web resource. Also this really just fixes the symptom and not the cause.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="../css/KoGrid.css" rel="stylesheet" />
    <script src="../js/jquery_1.8.3.min.js"></script>
    <script src="../js/knockout.js"></script>
    <script src="../js/koGrid_2.1.1.js"></script>
    <style type="text/css">
        .gridStyle {
            border: 1px solid rgb(212,212,212);
            width: 400px; 
            height: 300px;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        $(function () {
            setTimeout(function () {
                debugger;
                function mainVm() {
                    var self = this;
                    this.myData = ko.observableArray([{ name: "Moroni", age: 50 },
                                                      { name: "Tiancum", age: 43 },
                                                      { name: "Jacob", age: 27 },
                                                      { name: "Nephi", age: 29 },
                                                      { name: "Enos", age: 34 }]);
                    this.gridOptions = {
                        canSelectRows: false,
                        multiSelect: false,
                        data: self.myData
                    };
                };
                ko.applyBindings(new mainVm());
            }, 3000);            
        });

    </script>

    <div class="gridStyle" data-bind="koGrid: gridOptions"></div>
</body>
</html>

http://jsfiddle.net/wycleffsean/yHrBA/2/

What could cause this behavior ONLY in CRM? It works fine by itself in every browser. What does the render mode have to do with script behavior?

It doesn't "stop responding" for me, but I do get a `SEC7112: Script from https://raw.github.com/Knockout-Contrib/KoGrid/master/koGrid-2.1.1.debug.js was blocked due to mime type mismatch` in IE9 — Paul S., Jan 23 '13 at 15:30
Try actually adding that as a separate web resource and make sure that it's type is "JScript" — wycleffsean, Jan 23 '13 at 16:18
@thang Tat was a good one. I'm going to view a guy in striped black/white tights, black beret and white paint in his face every time I'll see anything about MIME types. — Konrad Viltersten, Jan 23 '13 at 20:21

Paul Way · Answer 1 · 2013-01-23T22:47:05.223

0

enter image description here Make sure all of the CSS and JavaScript files are also web resources, or swap out the full URL hosted somewhere else.

<link href="../css/KoGrid.css" rel="stylesheet" />
<script src="../js/jquery_1.8.3.min.js"></script>
<script src="../js/knockout.js"></script>
<script src="../js/koGrid_2.1.1.js"></script>

If you do reference a CDN, make sure to use HTTPS to avoid any mixed mode authentication.

edited Jan 23 '13 at 22:47

answered Jan 23 '13 at 17:25

Paul Way

1,966
1
13
10

It is not an issue with a dependency. There are no errors, and when the browser is in compatibility view it works. – wycleffsean Jan 23 '13 at 18:33
I added this as an HTML web resource, added the KoGrid css and js files, and then pointed to the Microsoft CDNs and it worked fine. Here's my header: [ ] – Paul Way Jan 23 '13 at 22:40
Bummer, the formatting took out the "https://" in front of both CDN urls. Make sure to include those. – Paul Way Jan 23 '13 at 22:42
We were on rollup 10 at the time of this issue. Upgrading to CRM rollup 12 seems to have resolved it – wycleffsean Feb 08 '13 at 03:03

Script freezes IE unless in Compatibility View

1 Answers1