All nodes are disabled in IE8

ghost commented 10 years ago

I use v3.0.3 with jQuery v1.11.1, and my tree works fine in IE10 and IE11. But in IE8, all nodes are disabled when the page is loaded. I never disable them.

The code generated in IE8:

<DIV id="tvw" class="jstree jstree-1 jstree-default" role=tree jQuery111108561090004770653="31">
    <UL class="jstree-container-ul jstree-children">
        <LI hideFocus id="" class="jstree-node  jstree-leaf" role=treeitem disabled sizzle-1407978381019="[object Object]">
            <I class="jstree-icon jstree-ocl"></I>
            <A hideFocus style="hide-focus: true" class=jstree-anchor disabled onclick="" href="javascript:void(0);">
                <I class="jstree-icon jstree-themeicon"></I>
                <SPAN class=label>[...]</SPAN>
            </A>
        </LI>
        [...]
    </UL>
</DIV>

And here is the code generated in IE10:

<div class="jstree jstree-1 jstree-default" id="tvw" role="tree">
    <ul class="jstree-container-ul jstree-children">
        <li class="jstree-node  jstree-leaf" id="" role="treeitem">
            <i class="jstree-icon jstree-ocl"></i>
            <a class="jstree-anchor" onclick="" href="javascript:void(0);">
                <i class="jstree-icon jstree-themeicon"></i>
                <span class="label">[...]</span>
            </a>
        </li>
        [...]
    </ul>
</div>

And the code to create the tree:

    $().ready(function ()
    {
        $("#tvw").jstree(
        {
            "core":
            {
                "multiple": false
            }
        });
        $.jstree.reference("#tvw").open_all();
    });

I've tried to use the enable_node method to enable the nodes, but it doesn't work, and I find that the "disabled" state of the node object is false.

vakata commented 10 years ago

This probably means the links themselves are disabled (the disabled property I see in the generated code) and jstree is not the cause of this. Make sure you are not in quirksmode (you must have a doctype set) and that you are not in compatibility mode.

I see your config but may I see your data (before creating the jstree instance).

On a side note - do not use open_all right away it is better to use it in a ready.jstree event handler.

ghost commented 10 years ago

I use this template (an ASP.NET MVC View) to build the tree:

<ul>
    @foreach (ItemType item in Model)
    {
      <li id="[...]">
        <a href="javascript:void(0);" onclick="[...]">
            <span class="label">@item.Name</span>
        </a>
        @if (item.HasChildren())
        {
            //recursion
        }
      </li>
    }
</ul>

Is it what you need?

And the doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

By the way, thanks for the side note.

vakata commented 10 years ago

Please share the HTML (or sample of it) not the view code, but before jstree goes over it, so that I can try to reproduce the issue.

ghost commented 10 years ago

The generated HTML in IE8:

<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" -->
<HTML class=" js no-flexbox no-flexbox-legacy no-canvas no-canvastext no-webgl no-touch no-geolocation postmessage no-websqldatabase no-indexeddb no-hashchange no-history draganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface no-generatedcontent no-video no-audio localstorage sessionstorage no-webworkers no-applicationcache no-svg no-inlinesvg no-smil no-svgclippaths" xmlns="http://www.w3.org/1999/xhtml">
    <HEAD>
        <STYLE>article {
            DISPLAY: block
        }
        aside {
            DISPLAY: block
        }
        details {
            DISPLAY: block
        }
        figcaption {
            DISPLAY: block
        }
        figure {
            DISPLAY: block
        }
        footer {
            DISPLAY: block
        }
        header {
            DISPLAY: block
        }
        hgroup {
            DISPLAY: block
        }
        nav {
            DISPLAY: block
        }
        section {
            DISPLAY: block
        }
        audio {
            DISPLAY: none
        }
        canvas {
            ZOOM: 1; DISPLAY: inline
        }
        video {
            ZOOM: 1; DISPLAY: inline
        }
        [hidden] {
            DISPLAY: none
        }
        audio[controls] {
            ZOOM: 1; DISPLAY: inline
        }
        mark {
            BACKGROUND: #ff0; COLOR: #000
        }
    </STYLE>
    <TITLE></TITLE>
    <META content="text/html; charset=utf-8" http-equiv=Content-Type>
    <META name=viewport content=width=device-width>
    <META content=IE=7 http-equiv=X-UA-Compatible>
    <LINK rel=stylesheet type=text/css href="/Content/themes/base/Default.css">
    <LINK rel=stylesheet type=text/css href="/Content/themes/base/jquery.ui.all.css">
    <LINK rel=stylesheet type=text/css href="/Content/themes/base/jquery.ui.datepicker.css">
    <SCRIPT type=text/javascript src="/Scripts/jquery.js"></SCRIPT>

    <SCRIPT type=text/javascript src="/Scripts/jquery-migrate.js"></SCRIPT>

    <SCRIPT type=text/javascript src="/Scripts/jquery.ui.datepicker.js"></SCRIPT>

    <SCRIPT type=text/javascript src="/Scripts/jquery.ui.core.js"></SCRIPT>

    <SCRIPT type=text/javascript src="/Scripts/Jquery-ui-zhn.js"></SCRIPT>

    <SCRIPT type=text/javascript src="/Scripts/jquery-ui-1.8.20.min.js"></SCRIPT>

    <SCRIPT type=text/javascript src="/Scripts/jquery.blockUI.js"></SCRIPT>

    <SCRIPT type=text/javascript src="/Scripts/modernizr-2.5.3.js"></SCRIPT>
    <LINK rel=stylesheet type=text/css href="/Content/themes/base/Local.css">
    <LINK rel=stylesheet type=text/css href="/Content/themes/base/jsTree/default/style.css">
    <SCRIPT type=text/javascript src="/Scripts/jsTree/jstree.js"></SCRIPT>
</HEAD>
<BODY style="ZOOM: 1">
    <DIV id="tvw" class="jstree jstree-1 jstree-default" role=tree jQuery111108561090004770653="31">
        <UL class="jstree-container-ul jstree-children">
            <LI hideFocus id="" class="jstree-node  jstree-leaf" role=treeitem disabled sizzle-1407978381019="[object Object]">
                <I class="jstree-icon jstree-ocl"></I>
                <A hideFocus style="hide-focus: true" class=jstree-anchor disabled onclick="" href="javascript:void(0);">
                    <I class="jstree-icon jstree-themeicon"></I>
                    <SPAN class=label>[...]</SPAN>
                </A>
            </LI>
            [...]
        </UL>
    </DIV>
    <SCRIPT type=text/javascript>
        $().ready(function ()
        {
            $("#tvw").jstree(
            {
                "core":
                {
                    "multiple": false
                }
            });
            $.jstree.reference("#tvw").open_all();
        });
    </SCRIPT>
    [...]
</BODY>
</HTML>

The tree is at the beginning of the page.

vakata commented 10 years ago

You have a disabled attribute on your LI node - IE8 is probably acting accorging to this attribute, which has nothing to do with jstree - remove the attribute. Also - it seems to me this is not the generated HTML BEFORE jstree parses it, but still - jstree will not add the disabled attribute - track down why it is there, and remove it - your problem will be solved, and there is nothing jstre can do about this - it is some browser styling.

vakata / jstree

All nodes are disabled in IE8 #799