jsTree 卡在“正在加载”状态在IE8上

发布于 2024-11-18 14:44:07 字数 4002 浏览 5 评论 0原文

我在两个不同的页面中有树，两个页面都有很多其他的功能也。它们在 Firefox 中都运行良好，但 IE8 会卡住在“正在加载..”上，没有明显的错误消息（我没有任何为 IE8 安装了 devtools，因为我不知道）。

我在网上查了一下，发现我应该声明一个文档类型，我做到了，但没有帮助。我还尝试将页面剥离到 bare Essentials+jstree，但是树还是不行。

这是代码。我去掉了一些我认为不是的部分必要的（尽管考虑到这个问题，它们可能是必要的）。

我想我在 jstree 主页的某个地方看到了一些关于变量名和 IE 不兼容 - 比如“use id 而不是名字”？我的问题可能是因为类似的事情吗？我也明白一些 IE 问题是因为 IE 的奇怪方式处理版本（或者其他什么，我不太明白）。什么这是否意味着，这可能是我的问题的根源吗？

<!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>

此复制粘贴适用于另一个论坛，此后我做了一些更改。我已将 jQuery 更新到最新版本 (1.6.2)，并且删除了一些自关闭标签（链接、输入、中断）。

这是我的 JSON 的片段（它不是整个 JSON，因此括号中可能有错误）。更新版本使用“idx”而不仅仅是“x”，x 是一个数字。

[{ "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" : [ ] } ] }]

附言。抱歉，格式很差，仍然无法完全处理 ^^;;

原文

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 ^^;;

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

指尖上的星空 2024-11-25 14:44:07

嗯，是的，我找到了答案。 IE8 挂起是因为树太大。我从 json 中删除了大约一半的条目，并且树加载得很好。

如果我找到解决这个问题的方法，我会报告。

编辑：我更新了 OpenLayers（另一个开源插件，这个用于绘制地图）并且 jsTree 开始工作。我以为我使用的是最新版本的 OpenLayers，但几天前我们的 svn 出现了问题，所以我想我毕竟没有使用绝对最新的版本。

至此，这个问题就得到了解答。我会在一两天内删除，因为我怀疑这对任何人都有帮助（“如果你使用 jstree 和旧版本的 OpenLayers，IE8 可能会挂起”..？对）。如果问题确实再次出现，我宁愿开始一个新问题，也不愿在这里继续。

回复收藏 0 原文

我偏爱纯白色 2024-11-25 14:44:07

您的 ID 不应该是数字，因为 DOM 无法处理元素 ID 的某些情况。不允许使用纯数字和这些字符 (!"#$%&'()*+,./:;<=>?@[\]^{|}~` ）。
使用 id1 而不是 1。

我发现 jstree 自 jquery 1.6.2 以来存在一些大问题，并且无法在 jstree google groups 上获得任何反馈，因此在继续之前也请考虑一下。

我检查了上面发布的 json，发现它也不正确：您需要关闭初始的 [ 和 {

这是正确的 json，排除 ID：

[
    {
        "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": []
                    }
                ]
            }
        ]
    }
]

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": []
                    }
                ]
            }
        ]
    }
]

回复收藏 0 原文

~没有更多了~