jsTree 未填充在 IE、Google chrome 等浏览器中答案

【问题标题】：jsTree not populated in Browser like IE, Google chromejsTree 未填充在 IE、Google chrome 等浏览器中
【发布时间】：2012-04-11 10:24:09
【问题描述】：

我正在尝试将 xmlData 绑定到 jsTree，但数据没有被填充到 jsTree（除了 Mozila firefox）。

jsTree 在 Mozila firefox 中填充了示例数据，但在其他浏览器中没有

我在以下代码中遗漏了什么？

jsTreeDemo.html 文件：

    <html>
<head>
    <title>Use jsTree</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jquery.jstree.js"></script>
    <script type="text/javascript">

    $(document).ready(function(){
        $.ajax({
            type: "GET",
            url: "Employees_xml_flat.xml",
            dataType: "text",
            success: function(xmlData) {
                $("#treeViewDiv").jstree({
                    "xml_data" : {
                        "data" : xmlData
                    },
                    "plugins" : [ "themes", "xml_data" ]
                });
            }
        });
    });

</script>
</head>
<body>

示例xml文件如下：

<root>  
    <item id="4" parent_id="0" state="open">  
        <content><name><![CDATA[Charles Madigen]]></name></content>  
    </item>  
    <item id="192" parent_id="4">    
  <content><name><![CDATA[Ralph Brogan]]></name></content>               
    </item>  
    <item id="295" parent_id="192">    
        <content><name><![CDATA[Bhushan Sambhus]]></name></content>  


    </item>  
    <item id="294" parent_id="192">    
        <content><name><![CDATA[Betsy Rosenbaum]]></name></content>  
    </item>  </root>

**Mozila firefox 11.0 版**：jsTree 填充良好

**Internet Explorer IE8 版**：

Google Chrome 版本 18.0.1025.162 m ** : 什么都没有显示 :: 控制台出现错误 **XMLHttpRequest 无法加载 file:///C:/Users/VaibhaV/JsTreeDemo/files/Employees_xml_flat.xml。 Access-Control-Allow-Origin 不允许 Origin null。

浏览器兼容性问题？代码问题？ xml格式问题？

在此问题上的任何帮助或指导将不胜感激。

【问题讨论】：

查看控制台是否有AJAX请求导致的错误。
@RoryMcCrossan 收到错误消息：参数数量错误或属性分配无效
+ throws 既不提供数据也不提供 ajax 设置。
你看过https://developer.mozilla.org/en/XMLSerializer吗？

标签： jquery-ui jquery jstree

【解决方案1】：

让我假设Employees_xml_flat.xml 的网址是正确的。那么变量 xmlData 应该是一个包含您的 xml 示例文件数据的字符串。

另外让我假设您将 jstree 包附带的“主题”文件夹放在与您的 jquery.jstree.js 文件相同的文件夹中。

我注意到的第一件事是您的示例 xml 文件在示例 xml 文件的末尾不包含 </root> 元素！如果您的示例 xml 文件不包含此元素，您的 jstree 将继续显示“正在加载...”。

此外，我没有使用 ajax 获取您的示例 xml 文件，而是手动将其放入字符串中（+ </root> 在文件末尾）。我的结果表明，您的示例 xml 文件应该具有正确的文件格式，并且代码应该可以在 Firefox、Chrome 和 Internet Explorer 中运行。这是我的测试 html 文件：

<html>
<head>
    <title>Use jsTree</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.jstree.js"></script>
    <script type="text/javascript">

    $(document).ready(function(){
        $.ajax({
            type: "GET",
            url: "Employees_xml_flat.xml",
            dataType: "text",
            success: function(xmlData) {
                $("#treeViewDiv").jstree({
                    "xml_data" : {
                        "data" : xmlData
                    },
                    "plugins" : [ "themes", "xml_data" ]
                });
            }
        });
    });

</script>
</head>
<body>
    <div id="treeViewDiv"></div>
</body>
</html>

更新

根据您的评论，我又看了一遍。查看 jstree 文档，数据将作为 XML 字符串添加：

数据

一个 XML 字符串（如果不使用，则为 false）。默认为假。

指定要加载到容器中并转换为树。

目前，由于您在 ajax 调用中选择了 dataType 为“xml”，因此返回对象是 XMLObject 而不是字符串。要让 ajax 调用返回纯文本字符串，请将 dataType 设置为“text”。我已经更新了上面的代码，它应该可以工作:)

线

var xmlstr = xmlData.xml ? xmlData.xml : ( new XMLSerializer()).serializeToString(xmlData);

因此不再需要。但即使你想保留这条线，它也应该能正常工作。在 Chrome、IE 和 firefox 中测试过。

IE8 更新

如果我得到了与您在 IE8 中相同的结果，我已经查看了。与上面的代码一样打开了确切的 html 文件，除了我将 jquery.js 替换为：https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js。此测试的结果可以在this image 中看到。如您所见，该代码在 IE8 中也有效。

您使用的是什么版本的 jQuery？您使用的是 1.7.2 版吗？会不会是您的 jQuery.js 文件以某种方式损坏了？

另一个更新

Chrome 报错的解决方法可以在here 找到。这绝对可以解决您在 Chrome 中的问题。至于 IE7 和 IE8：你必须在你的 html 页面中添加一个 DOCTYPE。即：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

【讨论】：

@1 个主题和 jquery.jstree.js 在同一文件夹中@2 存在于原始文件中，此处缺失 :)，添加。我这边不能接受答案。请给我很好的解决方案。
@VaibhaV 我又看了一遍，我想我找到了你的问题。您基本上必须将您的 ajax 调用中的 dataType 更改为“文本”（请参阅我对答案的编辑）
将 xml 更改为文本然后在 Internet Explorer 8 上收到错误消息 :( 网页错误详细信息用户代理：Mozilla/4.0（兼容；MSIE 7.0；Windows NT 6.1；WOW64；Trident/4.0；SLCC2；。 NET CLR 2.0.50727；.NET CLR 3.5.30729；.NET CLR 3.0.30729；InfoPath.1；.NET4.0C；.NET4.0E) 时间戳：2012 年 4 月 22 日星期日 18:32:51 UTC 消息：错误参数数量或无效属性分配行：16 字符：3008 代码：0 URI：file:///C:/Users/VaibhaV/Documents/Aptana%20Studio%203%20Workspace/JsTreeDemo/files/jquery.js
我在 IE8 中验证了上面的代码，它可以工作。请参阅我对此答案的更新。
用 jQuery.min.js 替换 jquery.js IE8 中显示的树 :) jquery.js 有什么问题？从哪里我会得到正确的（未损坏的） jquery.js ？将来如何发现特定的 js 已损坏？在我的 xml 中，每个节点 state=close 仍然在 IE8 中展开所有节点有什么问题 :( 并且树不显示在 Google chrome 中 :(