Not working on IE8 or IE9 compatibility mode

GoogleCodeExporter commented 8 years ago

I am new to dynatree and just playing around with it for one of my requiremnt
1. The Tree view is not displayed in IE8 or IE9 compatibility mode.

HTML

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" 
Inherits="ValueManager.test" %>

<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=9.0.0.0, 
Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
    Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="Stylesheet" href="style/VMGlobal.css" type="text/css" />
    <script src="TreeView_Resource/jquery/jquery.js" type="text/javascript"></script>
    <script src="TreeView_Resource/jquery/jquery-ui.custom.js" type="text/javascript"></script>
    <script src="TreeView_Resource/jquery/jquery.cookie.js" type="text/javascript"></script>
    <link href="TreeView_Resource/src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" />
    <script src="TreeView_Resource/src/jquery.dynatree.js" type="text/javascript"></script>

    <script type="text/javascript">

    var treeData = [
        {title: "item1 ", tooltip: "",expand: true, },
        {title: "item2", select: false,expand: true, },
        {title: "Folder", key: "id3",expand: true,
            children: [
                { title: "Sub-item 3.1", expand: true,
                    children: [
                        {title: "Sub-item 3.1.1", key: "id3.1.1" },
                        {title: "Sub-item 3.1.2", key: "id3.1.2" }
                    ]
                },
                { title: "Sub-item 3.2", expand: true,
                    children: [
                        {title: "Sub-item 3.2.1", key: "id3.2.1" },
                        {title: "Sub-item 3.2.2", key: "id3.2.2" }
                    ]
                }
            ]
        },
        {title: "Document", key: "id4", expand: true,
            children: [
                {title: "Sub-item 4.1", activate: false, expand: true,
                    children: [
                        {title: "Sub-item 4.1.1", key: "id4.1.1" },
                        {title: "Sub-item 4.1.2", key: "id4.1.2" }
                    ]
                },
                {title: "Sub-item 4.2", select: false, expand: true,
                    children: [
                        {title: "Sub-item 4.2.1", key: "id4.2.1" },
                        {title: "Sub-item 4.2.2", key: "id4.2.2" }
                    ]
                },
                {title: "Sub-item 4.3 ", hideCheckbox: false },
                { title: "Sub-item 4.4 ", unselectable: false }
            ]
        }
    ];
    $(function(){
        $("#tree2").dynatree({
            checkbox: true,
            selectMode: 2,
            children: treeData,
            onSelect: function(select, node) {
                // Display list of selected nodes
                var selNodes = node.tree.getSelectedNodes();
                // convert to title/key array
                var selKeys = $.map(selNodes, function(node){
                       return "[" + node.data.key + "]: '" + node.data.title + "'";
                });
                $("#echoSelection2").text(selKeys.join(", "));
            },
            onClick: function(node, event) {
                // We should not toggle, if target was "checkbox", because this
                // would result in double-toggle (i.e. no toggle)
                if( node.getEventTargetType(event) == "title" )
                    node.toggleSelect();
            },
            onKeydown: function(node, event) {
                if( event.which == 32 ) {
                    node.toggleSelect();
                    return false;
                }
            },
            // The following options are only required, if we have more than one tree on one page:
            cookieId: "dynatree-Cb2",
            idPrefix: "dynatree-Cb2-"
        });
    });

    </script>
    <script type="text/javascript">
        function LoadData() {
            PageMethods.getTreeViewData(OnLoadDataComplete);
        }
        function OnLoadDataComplete(result) {
            debugger;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"
        EnablePageMethods="true" LoadScriptsBeforeUI="false" ScriptMode="Release" />   

    <div id="tree2">
    </div>
    <div>
        Selected keys: <span id="echoSelection2">-</span></div>
        <input type="button" value="Load Data" onclick="LoadData();" />
    </form>
</body>
</html>

What is the expected output? What do you see instead?
The tree is not displayed at all

What version of the dynatree and jQuery are you using? latest
On what operating system and browser? Windows 7, IE8

What DOCTYPE declaration are you using?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Original issue reported on code.google.com by speedri...@gmail.com on 18 Sep 2012 at 11:33

GoogleCodeExporter commented 8 years ago

Hi,
can you reproduce this with the online examples?
I tried and it looked ok.
Any helpful messages in the browser console ([F12])?

Original comment by moo...@wwwendt.de on 18 Sep 2012 at 3:18

Changed state: Waiting

GoogleCodeExporter commented 8 years ago

Closing 'Waiting' issues without timely answer

Original comment by moo...@wwwendt.de on 6 Oct 2013 at 2:09

Changed state: Done

GoogleCodeExporter commented 8 years ago

Cleanup Scrumboard

Original comment by moo...@wwwendt.de on 2 May 2014 at 7:47

Added labels: Milestone-Release2.0

kcmohanprasad / dynatree

Not working on IE8 or IE9 compatibility mode #355