Home/ Questions/Q 6119531
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T15:33:51+00:00

I have trees in two different pages, both have lots of other functionality too.

  • 0

I have trees in two different pages, both have lots of other
functionality too. They both work fine in Firefox, but IE8 gets stuck
on “Loading..”, with no apparent error messages (I don’t have any
devtools installed for IE8, since I don’t know any).

I looked on the web, and found that I should declare a doctype, which
I did but it didn’t help. I also tried stripping down the pages to the
bare essentials+jstree, but the tree still didn’t work.

Here’s the code. I’ve taken out some parts which I think aren’t
essential (though considering the problem, they might be).

I think I saw somewhere in the jstree homepage a mention about some
variable name and IE being incompatible – something like “use id
instead of name”? Could my problem be because of something like that?
I also understand some IE problems are because of the weird way IE
handles versions (or something, I don’t quite understand it). What
does that mean, and could that be the source of my problem?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/
TR/xhtml11/DTD/xhtml11.dtd">

<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
-SNIP-
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/
jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css" />
   <script src="<%= hostUrl %>/js/jquery-1.4.2.js" type="text/
javascript"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/
jquery-ui.js" type="text/javascript"></script>
   <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/
jquery.bgiframe-2.1.1.js" type="text/javascript"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/i18n/
jquery-ui-i18n.min.js" type="text/javascript"></script>
<script src="<%= hostUrl %>/js/jsTree/jquery.jstree.js" type="text/
javascript"></script>
   <link rel="stylesheet" type="text/css" href="/WebUI2/js/jsTree/themes/
css/style.css" />
   <script type="text/javascript" src="/WebUI2/js/jsTree/themes/js/
jquery-ui-1.8.13.custom.min.js"></script>
-SNIP-
<script>


$(function () {

   $("#tree")

   .jstree({
           "json_data" : {
                   "ajax" : {
                           "url" : "getAreaTree?treeType=Areas&ownerPhone=<
%=webSessionObject.getUserPhoneNum()%>",
                           "data" : function (n) {
                       return { id : n.attr ? n.attr("id") : 0 };
                   }
                   }
           },

           types : {
                   types : {

                           "folder" : {

                           },
                           "file" : {
                                   "valid_children" : "none"
                           }
                   }
           },

           checkbox : {
                   "real_checkboxes" : "true",
                   "override_ui" : "true",
                   "real_checkboxes_names" : function(n){
                           console.log("Aasd");
                           return[("area"+n[0].id),n[0].id];
                   }
           },

           themes : {
                   theme : "apple"
           },

           "plugins" : ["json_data", "ui", "checkbox", "types", "themes" ]
   });




});
</script>

<div class="box_start">
 <div class="box_content">
   <h1><fmt:message key="owner.text.areas" /></h1>
    <div id="tree"style="overflow:auto border:none"></div>
       <br />
   </div>
   <div class="box_end"></div>
 </div>

This copypaste is for another forum, and I’ve since done some changes. I’ve updated jQuery to it’s newest version (1.6.2), and I’ve eliminated some self closing tags (links, inputs, breaks).

Here’s a snippet of my JSON (it’s not the whole JSON, so there may be errors with brackets). The updated version uses “idx” instead of just “x”, x being a number.

[{ "data" : "Areas", "attr" : { "id" : "1", "rel" : "folder" }, "state" : "open",
"children" : [{ "data" : "[Testi]", "attr" : { "id" : "261", "rel" : "folder" },  
"state" : "closed", 
"children" : [ ] } , { "data" : "TESTI", "attr" : { "id" : "11", "rel" : "folder" },   
"state" : "closed", 
"children" : [{ "data" : "[ Kansio ]", "attr" : { "id" : "271", "rel" : "folder" }, 
"state" : "closed", 
"children" : [ ] } , { "data" : "[ folder ]", "attr" : { "id" : "281", "rel" : 
"folder" }, "state" : "closed", 
"children" : [ ] } ] }]

PS. Sorry for the poor formatting, still can’t quite handle SO ^^;;

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Umm yeah, I found the answer. IE8 hangs because the tree is too large. I cut about half of the entries from the json, and the tree loaded just fine.

    I’ll report back if I find a way around this.

    edit: I updated OpenLayers (another opensource plugin, this one is used to draw maps) and jsTree started working. I thought I used the newest version of OpenLayers, but we had problems with our svn a couple of days ago, so I guess I wasn’t working on the absolute newest version after all.

    As such, this question is answered. I’ll delete in a day or two, since I doubt this will be helpful for anyone (“if you use jstree and an old version of OpenLayers, IE8 could hang”..? Riight). If the problem does show up again, I’ll rather start a new question than continue here.

    • 0