2

I am trying to bind xmlData into jsTree but the data is not being populated into jsTree (other than Mozila firefox).

jsTree is populated with sample data in Mozila firefox but not in other browser

What have I missed in following code?

jsTreeDemo.html file:

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

Sample xml file as follows:

<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 version 11.0 ** : jsTree populated well

**Internet explorer version IE8 **:

enter image description here

Google Chrome version 18.0.1025.162 m ** : Nothing is display :: Error coming on console **XMLHttpRequest cannot load file:///C:/Users/VaibhaV/JsTreeDemo/files/Employees_xml_flat.xml. Origin null is not allowed by Access-Control-Allow-Origin.

Browser compatibility issue? Code issue? Xml format issue ?

Any help or guidance in this matter would be appreciated.

4

1 に答える 1

4

Employees_xml_flat.xmlへのURLが正しいと仮定しましょう。次に、変数xmlDataは、xml サンプル ファイルのデータを含む文字列である必要があります。

また、jstree パッケージに付属する「themes」フォルダーをjquery.jstree.jsファイルと同じフォルダーに配置すると仮定します。

</root>最初に気付いたのは、サンプル xml ファイルには、サンプル xml ファイルの末尾に要素が含まれていないことです!! サンプル xml ファイルにこの要素が含まれていない場合、jstree は "読み込み中..." を表示し続けます。

さらに、サンプルの xml ファイルを ajax を使用して取得する代わりに、手動で文字列 (</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)。デフォルトは false です。

コンテナにロードしてツリーに変換するコンテンツを指定します。

現在、ajax 呼び出しで dataType を「xml」に選択しているため、返されるオブジェクトは文字列ではなく XMLObject です。ajax 呼び出しでプレーン テキスト文字列を返すようにするには、dataType を「text」に設定します。上記のコードを更新しましたが、動作するはずです:)

この線

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

したがって、もう必要ありません。ただし、この行を保持したい場合でも、適切に機能するはずです。Chrome、IE、Firefox でテストしました。

IE8 アップデート

IE8で行ったのと同じ結果が得られたかどうかを調べました。jquery.js をhttps://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.jsに置き換えたことを除いて、上記のコードと同じように正確な html ファイルを開きました。このテストの結果は、この画像で見ることができます。ご覧のとおり、コードは IE8 でも機能します。

jQuery のどのバージョンを使用していますか? バージョン 1.7.2 を使用していますか? jQuery.js ファイルが何らかの形で破損している可能性がありますか?

別のアップデート

Chrome で発生したエラーの解決策については、こちらを参照してください。これにより、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">
于 2012-04-18T20:12:02.813 に答える