jstree once loaded removes other ui (jqueryui.js) settings on page

Question

hi all,

i have an issue with jsTree and the issue is as follows:

• I have draggable divs with resizable ability on my page basically you can sort them and resize them
• Then i added a jsTree to the form which retrieves values using ajax and populates the tree using xml_data plugin
• The issue is once the tree is loaded then the divs are not resizeable anymore and cannot be dragged around.

When looking at the html rendered markup after everything has been loaded i can see that className no longer has "ui-resizable"

has anyone come across this bizarre problem?

thanks in advance for kindly assisting me.

Best Muzi

Simple Tree Code

$("#jsTreeDiv").bind("loaded.jstree", function (event, data) {

            alert("TREE IS LOADED");

            var arrTmp = [90, 91];

            //loop thru all item in tree if edit
            if (arrTmp.length > 0) {
                $("#jsTreeDiv li").each(function (i) {
                    var $curItem = $(this);
                    if ($curItem.length > 0) {
                        for (var i = 0; i < arrTmp.length; i++) {

                            if (arrTmp[i] == parseInt($curItem[0].id)) {
                                //delete node
                                $("#jsTreeDiv").jstree("delete_node", $curItem);
                            }
                        }
                    }
                });
            }

        }).jstree({
            "plugins": ["themes", "xml_data", "types", "ui", "dnd", "crrm"],
            "xml_data": {
                "ajax": {
                    "type": "POST",
                    "dataType": "html",
                    "url": urlXml,
                    "success": function (msg) { }
                },
                "xsl": "flat"
            },
            "themes": {
                "theme": "default",
                "url": "../scripts/jsTree/default/style.css",
                "dots": true,
                "icons": true
            },
            "ui": {
                "select_limit": 1,
                "initially_select": ["lvl_1"]
            }
        });

    });

Simple Div markup

<ul class="Cols-01">
    <li>
        <div id="Div2" class="ColContainer-01">
            <div class="ColContainerHead"><div class="ColHandlerImg-01"><img src="ColHandler.png" class="ColHandler-01" /></div>[ Data Col Name 2 ]</div>
            <div class="ColContainerBody"></div>
        </div>
    </li>
    <li>
        <div id="Div1" class="ColContainer-01">
            <div class="ColContainerHead"><div class="ColHandlerImg-01"><img src="ColHandler.png" class="ColHandler-01" /></div>[ Data Col Name 2 ]</div>
            <div class="ColContainerBody"></div>
        </div>
    </li>    

Code when DOM is ready

$(".Cols-01 li").each(function (i) {
    var $Div = $(this).find("div.ColContainer-01");
    $Div.resizable(); //make each div resizable
});

$(".Cols-01").sortable(); //make ul list sortable


//then load tree 

Answer 1

Hi all,

this is no longer an issue and there's no problem with jstree.

the problem was the order in which i was initialization the jsTree, i fixed this by adding the jstree code to $(document).ready(function () {}); therefore the tree loads when DOM is ready.

Now I'm using the create method within the jstree to load nodes intot.