CODEWITHSUNDEEP
jquery-uijqueryjstree
StackOverFlow
StackOverFlow

Reputation: 4614

jsTree not populated in Browser like IE, Google chrome

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.

Upvotes: 2

Views: 5512

Answers (1)

dennisg
dennisg

Reputation: 4368

Let me assume that the url to Employees_xml_flat.xml is correct. Then the variable xmlData should be a string containing the data of your xml sample file.

Also let me assume that you put the "themes" folder that goes with the jstree package in the same folder as your jquery.jstree.js file.

The first thing I notice is that your sample xml file does not contain a </root> element at the end of your sample xml file!! If your sample xml file does not contain this element, your jstree will keep showing "Loading...".

Furthermore, instead of obtaining your sample xml file using ajax, I put it manually into a string (+ </root> at the end of the file). My results show this your sample xml file should have the correct file format this way and the code should work in Firefox, Chrome and Internet Explorer. Here is my test html file:

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

UPDATE

I took a look at it again, based on your comment. Looking at the jstree documentation, the data is to be added as an XML string:

data

A XML string (or false if not used). Default is false.

Specifies the content to load into the container and convert to a tree.

Currently, since you have selected the dataType in your ajax call to be 'xml', the return object is a XMLObject and not a string. To have the ajax call return a plain text string, set the dataType to 'text'. I have updated the piece of code above and it should work :)

The line 

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

is thus not needed anymore. But even if you would want to put keep this line in, it should work properly. Tested it in Chrome, IE and firefox.

IE8 update

I have taken a look if I got the same result as you did in IE8. Opened the exact html file as in the above code, except that I replaced jquery.js with: https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js. The result of this test can be seen in this image. As you can see, the code works, also in IE8.

What version of jQuery are you using? Are you using version 1.7.2.? Could it be that your jQuery.js file is corrupted in some way?

Another update

The solution to the error caused in Chrome can be found here. This should definitely fix your problem in Chrome. As for IE7 and IE8: you have to add a DOCTYPE to your html page. I.e.:

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

Upvotes: 4

Related Questions