Kendo Window Close Button Broken In IE-8 only

Question

We are creating a kendo window using the following code (MVC Razor View):

function openServerDetailsWindow(ServerName) {
    var serverDetailsWindow = $("#serverDetailsWindow");
    serverDetailsWindow.empty();
    serverDetailsWindow.append('@Html.Raw(String.Format("Loading Server Details...<br /><img src=\"{0}\" />", Url.Content("~/images/ajax_loader_wfred_bb0826.gif")))');

    var $urlpath = "@Url.Action("ServerDetails", "Server", new { serverName = "SERVERNAMEPLACEHOLDER", Printable = false })".replace("SERVERNAMEPLACEHOLDER", ServerName);

    if (!serverDetailsWindow.data("kendoWindow")) {
            serverDetailsWindow.kendoWindow({
                width: "1200px",
                height: "650px",
                modal: true,
                visible: false,
                title: "Application Name - Server Details-" + ServerName,
                actions: ["Refresh", "Maximize", "Close"],
                close: function (e) {
                    $(this.element).empty();
                },
                content: $urlpath
            });
    } else {
        serverDetailsWindow.data("kendoWindow").refresh({ url: $urlpath });
    }

    if (!serverDetailsWindow.data("kendoWindow")) {
        alert("Tried to open but serverDetailsWindow kendo data was not defined.");
    } else {
        //don't maximize the window! It prevents users from knowing it's a window and not a new page.
        serverDetailsWindow.data("kendoWindow").title("Application Name - Server Details - " + ServerName.toUpperCase());
        serverDetailsWindow.data("kendoWindow").center();
        serverDetailsWindow.data("kendoWindow").open();
    }
}

This function is being called from a Kendo Grid, using a column template, and we've tried a couple methods - they both work the same, error in IE-8, perfect in Chrome.

Option 1
    string ServerLink = Html.ActionLink("#=SERVER_NAME#", "", "", new { onclick = "openServerDetailsWindow('#=SERVER_NAME#');return false;" }).ToHtmlString();

Option 2
    string ServerClientTemplate = "<a href=\"\\#\" onclick=\"javascript:openServerDetailsWindow('#=SERVER_NAME#');\">#=SERVER_NAME#</a>";

We use those two code blocks in hundreds of places in the site. Most of the time it works just fine in IE-8, and it ALWAYS works in Chrome. The only notable difference on the pages where it fails is that the grid with the link is brought in through AJAX, and on the pages where it consistently works the grid is rendered by Razor. We can not understand why that would be significant, or why it would only matter to IE-8.

As far as I know it works perfectly in newer versions of IE. Sorry we're a big bank and we can't upgrade IE. I've already tried to ban it - not gonna happen.

Tried but did not work:

• Creating the window in a new div appended to the document body with $(document.body).append("<div></div>") - worked only in Chrome, IE wouldn't open anything
• Return false from the function
• Different orders of setting the title, centering, and opening (last few lines)
• "Fixing" the "var $urlpath" line to a string (won't work across environments, didn't fix the issue anyway)
• Reviewed the browser differences - could not find anything significant but this remains open as a research path, it's clearly different in some way

As stated in the title, the problem here is that the close button (x button) at the top of the window does not do anything in IE-8. Very rarely, it will erase the contents of the window, but we can't reproduce that. The close (x) button is there, but it doesn't highlight and doesn't click. When this happens, the refresh and maximize buttons also become un-responsive.

Answer 1

Changing the first line of the function to:

var serverDetailsWindow = $("<div></div>");

...made it work. We were using append before to create a new div.