Displaying chosen tree with jstree plugin

Question

I try to make a tree with jstree plugin. I want to change tree content when user selects an option. I made jsfiddle to show my problem: http://jsfiddle.net/hy5LF/

When you choose a number from select input for the first time you get perfect tree but after you choose for the second time it's not working. I get list of nodes instead of an actual tree.

This is my function which displays chosen tree:

function PrintTree(nr) {
    var myNode = document.getElementById("html1");
    while (myNode.firstChild) {
        myNode.removeChild(myNode.firstChild);
    }
    $('#html1').append('<ul></ul>');

    var elements = [];

    switch (nr) {
        case '1':
            elements.push("Saab");
            elements.push("Volvo");
            elements.push("BMW");
            break;
        case '2':
            elements.push("1");
            elements.push("2");
            elements.push("3");
            break;
        case '3':
            elements.push("a");
            elements.push("b");
            elements.push("c");
            break;
    }

    for (var i = 0; i < elements.length; i++) {
        $('#html1 ul').append('<li>' + elements[i] + '</li>');
    }

    $('#html1').jstree();
}

$(document).ready(function () {
    $("#sel").change(function () {
        var val = $(this).val();
        PrintTree(val);
        $('#html1').jstree();
    });
});

Answer 1

Refer the demo: JSFIDDLE You will have to destroy the previous instance of the jstree using destroy.

code:

function PrintTree(nr) {
    var myNode = document.getElementById("html1");
    while (myNode.firstChild) {
        myNode.removeChild(myNode.firstChild);
    }
    $('#html1').append('<ul></ul>');

    var elements = [];

    switch (nr) {
        case '1':
            elements.push("Saab");
            elements.push("Volvo");
            elements.push("BMW");
            break;
        case '2':
            elements.push("1");
            elements.push("2");
            elements.push("3");
            break;
        case '3':
            elements.push("a");
            elements.push("b");
            elements.push("c");
            break;
    }

    for (var i = 0; i < elements.length; i++) {
        $('#html1 ul').append('<li>' + elements[i] + '</li>');
    }

    //$('#html1').jstree();
}

$(document).ready(function () {
    $("#sel").change(function () {
        $('#html1').jstree('destroy');//destroy the previous instance before initializing a new one
        var val = $(this).val();
        PrintTree(val);

        $('#html1').jstree();
    });
});

Answer 2

Im not jstree expert, but I guess there might be a problem with calling jstree() on element, that already was jstree.

So I delete and create div again with each call and it works now: http://jsfiddle.net/hy5LF/4/

Also I did few minor updates, but just very simple things:

function PrintTree(nr) {

    var wrapper = $("<div>");
    wrapper.insertAfter('#html1');
    $('#html1').remove();
    wrapper.attr('id', 'html1');
    wrapper.show(); // for some reason my new element were not visible?!? 
                    // So I had to display it... 

    var list = $("<ul>");
    wrapper.append(list);

    var elements = [];

    switch (nr) {
        case '1':
            elements.push("Saab");
            elements.push("Volvo");
            elements.push("BMW");
            break;
        case '2':
            elements.push("1");
            elements.push("2");
            elements.push("3");
            break;
        case '3':
            elements.push("a");
            elements.push("b");
            elements.push("c");
            break;
    }


    for (var i = 0; i < elements.length; i++) {
        list.append('<li>' + elements[i] + '</li>');
    }

    wrapper.jstree();
}

$(document).ready(function () {
    $("#sel").change(function () {
        var val = $(this).val();
        PrintTree(val);
    });
});