jstree - node path has unexpected space characters

Question

I need to get node path of jstree element ,I using this code :

$(function () {
    $('#jstree').jstree();
            $('#jstree')
            // listen for event
            .on('changed.jstree', function (e, data) {
                if (data.action == "select_node") {
                    var node_path = data.instance.get_path(data.node, "/");
                    console.log(node_path)
                }
            });

});

But I get unexpected space character (You can see in console.log() function)

http://jsfiddle.net/3q9Ma/741/

I need a pretty path like this : Folder1/children 1

Please tell me what wrong .

Thank you

Answer 1

The problem actually with the HTML in your fiddle. It looks like this:

<div id="jstree">
    <ul>
        <li>Folder 1
            <ul>
               <li id="child_1">Child 1</li>
               <li>Child 2</li>
            </ul>
        </li>
        <li>Folder 2</li>
    </ul>
</div>

The get_path function is doing exactly what it is supposed to - taking the text from the parent <li> followed by the text from the child <li>. What is happening is that the text from the parent Folder 1 is actually 'Folder/n ', which is causing your problem. I see why you have your HTML structured the way you do, since the example on jstree tells you to do it this way. A way around it would be to remove the line break after your Folder 1. It looks terrible, but it will make your get_path function work:

<div id="jstree">
    <ul>
      <li>Folder 1<ul>
          <li id="child_1">Child 1</li>
          <li>Child 2</li>
        </ul>
      <li>Folder 2</li>
    </ul>
</div>