CODEWITHSUNDEEP
jquerytreejstree
Benjamin Linard
Benjamin Linard

Reputation: 21

jsTree not populated in IE, Google chrome with JSON data

I checked for many threads about jsTree problems in IE and chrome, but none of the solutions helped me.

I put a correct doctype in my file. I took the last version correcting the "" bug.

But still nothing in IE and chrome (not even a "loading..." message), but working perfectly in Firefox (whatever the version of the 3 browsers).

You can directly generate and observe this bug in different browsers with the following adress: http://lbgi.igbmc.fr/orthoinspector/dbquery/?stype=text

Here's my tree initialisation code (in a jquery script):

var compressedTreeSkeleton = generateCompressedJSONData(organismTreeSkeleton);

// Generate the tree. Data provided is JSON (JavaScript Object Notation).
$(function(){
    $("#treeview").jstree({
        "json_data" : { "data" : compressedTreeSkeleton },
        "types" : {
            "types" : {
                "inner_node" : {
                    "icon" : {
                        "image" : "images/node_icon_closed.png"
                    }
                },
                "leaf_node" : {
                    "icon" : {
                        "image" : "images/leaf_icon_1.png"
                    }
                }
            }
        },
        "search" : {
            "case_insensitive" : true
        },
        "plugins" : ["themes", "ui", "json_data", "checkbox", "types", "search"]

    });
});
}

Here's a overview of the object generated by the first line of this code (the variable compressedTreeSkeleton), extract from the chrome console output (you can check it also directly online on the website). It's a table of "Object", each one containing the information of a node for the tree. This information (the objects) is generated via postgresql database queries prior to the creation of the tree.

[ Object {
    date: "2029-05-01"
    genus: "Oryza"
    identifier: "LOC"
    phylo_order: "59"
    phylum: "Eukaryota;Viridiplantae;Streptophyta;Streptophytina;Embryophyta;Tracheophyta;Euphyllophyta;Spermatop…"
    pk_bank: "1"
    pk_organism: "1"
    species: "sativa"
    taxid: "39947"
    __proto__: Object } ,

 Object, Object, Object, Object, (...) ]

The following error is launched in the chrome console:

 Uncaught TypeError: Object [object Object] has no method 'jstree'

And this one in IE:

   Object doesn't support this property or method

Working fine in Firefox ...

I'm lost about all this. Any idea where I should look ? Thanks for your advices.

Upvotes: 2

Views: 1878

Answers (1)

glortho
glortho

Reputation: 13200

The issue is this tag in your HTML:

<script type="text/javascript" src="js/jtree/\\_lib/jquery.js"></script>

Chrome and IE resolve this botched path and load this version of jQuery on top of the other version of jQuery loaded in jquery.tools.min.js. Since jstree is loaded prior to the non-tools version, it adds its methods to the tools version, which gets overwritten by the non-tools version. In Firefox, the tools version is never overwritten since the path isn't found, and jstree() and all related methods are available.

Bottom line: Remove that botched script tag and/or work out the version issues with jquery.tools.

Upvotes: 1

Related Questions