jsTree stuck on "loading" on IE8_问答_开发者_运维开发者技术经验分享

I have trees in two different pages, both have lots of other functionality too. They both work fine in Firefox, but IE8 gets stuck on "Loading..", with no apparent error messages (I don't have any devtools installed for IE8, since I don't know any).

I looked on the web, and found that I should declare a doctype, which I did but it didn't help. I also tried stripping down the pages to the bare essentials+jstree, but the tree still didn't work.

Here's the code. I've taken out some parts which I think aren't essential (though considering the problem, they might be).

I think I saw somewhere in the jstree homepage a mention about some variable name and IE being incompatible - something like "use id instead of name"? Could my problem be because of something like that? I also understand some IE problems are because of the weird way IE handles versions (or something, I don't quite understand it). What does that mean, and could that be the source of my problem?

<!DOCTYPE html PUBLIC "-//开发者_如何学运维W3C//DTD XHTML 1.1//EN" "http://www.w3.org/
TR/xhtml11/DTD/xhtml11.dtd">

<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
-SNIP-
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/
jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css" />
   <script src="<%= hostUrl %>/js/jquery-1.4.2.js" type="text/
javascript"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/
jquery-ui.js" type="text/javascript"></script>
   <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/
jquery.bgiframe-2.1.1.js" type="text/javascript"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/i18n/
jquery-ui-i18n.min.js" type="text/javascript"></script>
<script src="<%= hostUrl %>/js/jsTree/jquery.jstree.js" type="text/
javascript"></script>
   <link rel="stylesheet" type="text/css" href="/WebUI2/js/jsTree/themes/
css/style.css" />
   <script type="text/javascript" src="/WebUI2/js/jsTree/themes/js/
jquery-ui-1.8.13.custom.min.js"></script>
-SNIP-
<script>


$(function () {

   $("#tree")

   .jstree({
           "json_data" : {
                   "ajax" : {
                           "url" : "getAreaTree?treeType=Areas&ownerPhone=<
%=webSessionObject.getUserPhoneNum()%>",
                           "data" : function (n) {
                       return { id : n.attr ? n.attr("id") : 0 };
                   }
                   }
           },

           types : {
                   types : {

                           "folder" : {

                           },
                           "file" : {
                                   "valid_children" : "none"
                           }
                   }
           },

           checkbox : {
                   "real_checkboxes" : "true",
                   "override_ui" : "true",
                   "real_checkboxes_names" : function(n){
                           console.log("Aasd");
                           return[("area"+n[0].id),n[0].id];
                   }
           },

           themes : {
                   theme : "apple"
           },

           "plugins" : ["json_data", "ui", "checkbox", "types", "themes" ]
   });




});
</script>

<div class="box_start">
 <div class="box_content">
   <h1><fmt:message key="owner.text.areas" /></h1>
    <div id="tree"style="overflow:auto border:none"></div>
       <br />
   </div>
   <div class="box_end"></div>
 </div>

This copypaste is for another forum, and I've since done some changes. I've updated jQuery to it's newest version (1.6.2), and I've eliminated some self closing tags (links, inputs, breaks).

Here's a snippet of my JSON (it's not the whole JSON, so there may be errors with brackets). The updated version uses "idx" instead of just "x", x being a number.

[{ "data" : "Areas", "attr" : { "id" : "1", "rel" : "folder" }, "state" : "open",
"children" : [{ "data" : "[Testi]", "attr" : { "id" : "261", "rel" : "folder" },  
"state" : "closed", 
"children" : [ ] } , { "data" : "TESTI", "attr" : { "id" : "11", "rel" : "folder" },   
"state" : "closed", 
"children" : [{ "data" : "[ Kansio ]", "attr" : { "id" : "271", "rel" : "folder" }, 
"state" : "closed", 
"children" : [ ] } , { "data" : "[ folder ]", "attr" : { "id" : "281", "rel" : 
"folder" }, "state" : "closed", 
"children" : [ ] } ] }]

PS. Sorry for the poor formatting, still can't quite handle SO ^^;;

Umm yeah, I found the answer. IE8 hangs because the tree is too large. I cut about half of the entries from the json, and the tree loaded just fine.

I'll report back if I find a way around this.

edit: I updated OpenLayers (another opensource plugin, this one is used to draw maps) and jsTree started working. I thought I used the newest version of OpenLayers, but we had problems with our svn a couple of days ago, so I guess I wasn't working on the absolute newest version after all.

As such, this question is answered. I'll delete in a day or two, since I doubt this will be helpful for anyone ("if you use jstree and an old version of OpenLayers, IE8 could hang"..? Riight). If the problem does show up again, I'll rather start a new question than continue here.

Your ID should not be numbers, since the DOM can't handle certain cases for element IDs. Plain numbers, and these characters are not allowed (!"#$%&'()*+,./:;<=>?@[\]^{|}~`). Use id1 instead of just 1.

I've found that jstree has some big issues since jquery 1.6.2 and can't get any feedback on the jstree google groups, so think of that before moving forward too.

I've checked your json posted above and found it to be incorrect too: you need to close you initial [ and {

Here is the correct json barring the IDs:

[
    {
        "data": "Areas",
        "attr": {
            "id": "1",
            "rel": "folder"
        },
        "state": "open",
        "children": [
            {
                "data": "[Testi]",
                "attr": {
                    "id": "261",
                    "rel": "folder"
                },
                "state": "closed",
                "children": []
            },
            {
                "data": "TESTI",
                "attr": {
                    "id": "11",
                    "rel": "folder"
                },
                "state": "closed",
                "children": [
                    {
                        "data": "[ Kansio ]",
                        "attr": {
                            "id": "271",
                            "rel": "folder"
                        },
                        "state": "closed",
                        "children": []
                    },
                    {
                        "data": "[ folder ]",
                        "attr": {
                            "id": "281",
                            "rel": "folder"
                        },
                        "state": "closed",
                        "children": []
                    }
                ]
            }
        ]
    }
]