jsTree not populated in Browser like IE, Google chrome

Question

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.

Check the console to see if there are any errors caused by the AJAX request. — Rory McCrossan, Apr 11 '12 at 10:27
@RoryMcCrossan Getting error message : Wrong number of arguments or invalid property assignment — StackOverFlow, Apr 11 '12 at 10:43
Have you had a look at `https://developer.mozilla.org/en/XMLSerializer`? — Matijs, Apr 22 '12 at 22:21

score 4 · Accepted Answer · edited May 23 '17 at 12:06

4

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

edited May 23 '17 at 12:06

Community

1
1

answered Apr 18 '12 at 20:12

dennisg

4,358
1
23
28

@ 1 themes and jquery.jstree.js in same folder @ 2 present in original file, missing here :), added . Answer is not acceptable from my side. plz provide me good solution. – StackOverFlow Apr 22 '12 at 10:39
@VaibhaV I have looked at it again and I think I found your problem. You basically have to change your dataType in your ajax call to 'text' (See my edit of my answer) – dennisg Apr 22 '12 at 11:37
Changes xml to text then Got error message on Internet explorer 8 :( Webpage error details User Agent: Mozilla/4.0 (compatible; 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) Timestamp: Sun, 22 Apr 2012 18:32:51 UTC Message: Wrong number of arguments or invalid property assignment Line: 16 Char: 3008 Code: 0 URI: file:///C:/Users/VaibhaV/Documents/Aptana%20Studio%203%20Workspace/JsTreeDemo/files/jquery.js – StackOverFlow Apr 22 '12 at 18:35
I verified above code in IE8 and it works. See my update of this answer. – dennisg Apr 22 '12 at 20:27
replaced jquery.js by jQuery.min.js Tree displayed in IE8 :) whats issue with jquery.js ? from where I will get proper(not corrupted) jquery.js ? How to find out in future that particular js is corrupted? In my xml every nodes state=close still All nodes are expanded in IE8 whats wrong :( and tree not display in Google chrome :( – StackOverFlow Apr 23 '12 at 04:42
I do not know what the issue is with your jquery.js (you didn't provide me with information about your version or how you got it). You can get the most recent version of jQuery on http://jquery.com/. In production you usually get the minimized version. Finding our where the problem in a js file is, is just a matter of looking at the errors and debugging. For instance, the error in your previous comment said: Line: 16 in jquery.js . I don't know why they're expanded in IE8 (might be a jstree bug?). What version of Chrome are you using/what error do you get? – dennisg Apr 23 '12 at 17:49
Yes. I downloaded latest version of jquery-1.7.2.min.js. In my xml every nodes state=close still All nodes are expanded in IE8 whats wrong ? Added Image of jsTree behavior on IE8 plz go through it. Google chrome error is XMLHttpRequest cannot load file:///C:/Users/VaibhaV/JsTreeDemo/files/Employees_xml_flat.xml. Origin null is not allowed by Access-Control-Allow-Origin. – StackOverFlow Apr 25 '12 at 06:07
Thanks. I've updated my answer. I think this should solve all your problems to get it working in all of your browsers :) – dennisg Apr 25 '12 at 09:41
Thanks for reply IE related issue solved :) . Google chrome issue as it is XMLHttpRequest cannot load file:///C:/Users/VaibhaV/JsTreeDemo/files/Employees_xml_flat.xml. Origin null is not allowed by Access-Control-Allow-Origin. :( I am only one step behind to accept this answer :) – StackOverFlow Apr 25 '12 at 10:32
Either run it on a webserver (you can install xampp or wampp as a local webserver on your computer), or start Chrome with the option '--allow-file-access-from-files' set. – dennisg Apr 25 '12 at 10:37
:) Thanks for reply Google chrome issue also solved at my machine: JsTree display properly. But what about N number of user we can't say to everyone start your browser with --allow-file-access-from-files ---- http://softwareroxer.blogspot.in/2009/07/how-to-start-google-chrome-with-user.html ---- Is there alternative way ? – StackOverFlow Apr 25 '12 at 10:44
If you upload the files on a webserver (locally or remotely) the problem will automatically be solved. The user shouldn't get this error. – dennisg Apr 25 '12 at 10:46

jsTree not populated in Browser like IE, Google chrome

1 Answers1

UPDATE

IE8 update

Another update