2011-07-06 27 views
3

我在两个不同的页面中有树,它们都有很多其他的 功能。他们都在Firefox中工作正常,但IE8卡住 “加载..”,没有明显的错误信息(我没有任何 开发工具安装IE8,因为我不知道任何)。jsTree坚持在IE8上“加载”

我在网上看了一下,发现我应该声明一个文档类型,我做了 但是没有帮助。我也尝试剥离页面到 bare essentials + jstree,但树仍然没有工作。

这是代码。我已经拿出了一些我认为不重要的部分(尽管考虑到这个问题,他们可能是)。

我想我在jstree主页上看到了一些关于变量名称和IE不兼容的部分内容 - 例如“使用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" : [ ] } ] }] 

PS。对不起格式不好,仍然不能很好地处理SO ^^ ;;

+0

我通过jsLint运行JSON,结果很糟糕。我修正了这些错误(像不应该有的空间那样的愚蠢),但IE仍然不起作用。我为IE下载了DebugBar,但它不报告任何错误 - 只是关于html标签的一些警告。我大吃一惊。 –

回答

1

乌姆是的,我找到了答案。 IE8挂起,因为树太大。我从json剪下了大约一半的条目,并且树木装载得很好。

如果我找到解决方法,我会报告回来。

编辑:我更新了OpenLayers(另一个开源插件,这是用来绘制地图),jsTree开始工作。我以为我使用了最新版本的OpenLayers,但是前几天我们的svn出现了问题,所以我想我毕竟还没有在绝对最新的版本上工作。

因此,这个问题得到了回答。我会在一两天内删除,因为我怀疑这对任何人都会有帮助(“如果你使用jstree和旧版本的OpenLayers,IE8可能会挂起......”?Riight)。如果问题再次出现,我宁愿提出一个新问题,而不是继续这里。

+1

你可以设置你的节点上加载需求。设置“状态”:“打开”但是“子女”:[],这将随后调用带有nodeID的java来展开 – Bob

0

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

我发现jstree自从jquery 1.6.2以来有一些大问题,并且无法在jstree谷歌组上得到任何反馈,所以在继续前进之前也要考虑这一点。

我检查你的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": [] 
        } 
       ] 
      } 
     ] 
    } 
] 
+0

谢谢,我会检查这是否有帮助。你是说现在我应该坚持使用旧版本的jQuery吗? –

+0

我现在会推荐它。我编辑了我的答案来修复你的json。 – Bob

+0

那么,即使这是一个明显的缺陷,修复ID也没有帮助。无论如何,我读过jsTree FAQ,id应该以一个字母开头,但不知何故,我从来没有意识到我不会..:p –