programmatically select node

[curt]

I'm migrating to the v1rc...This is probably simple, however I've not
figured it out. Is there any way to programmatically select a node
based off one of its properties such as its id or title?

Thanks for any help...

[vakata]

Hi,

Just use one of those:
$.jstree.focused().select_node("#node_id");
$("selector > .to #tree-container").jstree("select_node","#node_id");

Kindest regards,
Ivan

[curt]

Per the documentation I was doing this:

jQuery("some-selector-to-container-node-
here").jstree("operation_name" [, argument_1, argument_2, ...]);
specifically:
jQuery($("#getStartedTree")).jstree("select_node", $("#test2"));

Was this implementation flawed?

I tried implementing your snippets all day with no success either.

I am getting your simple json example from a file: the json looks as
such:
[
{
"data" : "A node",
"children" : [ "Child 1", "Child 2" ]
},
{
"attr" : { "id" : "test1" },
"data" : {
"title" : "Long format demo",
"attr" : { "id" : "test2", "href" : "#" }
}
}
]

I have no problem populating the tree, however, once it is populated
I've been trying to programmatically select a node... thus seeing the
actual change in its look per the css.

I never see any change... thus it seems as I'm failing to implement
your code correctly.

Forgive me if I'm a bother, but I spent another day on this, and my
hair is out, and blood pressure up. :\

Again... Thanks for any help you can provide,
Curt.

On Jun 12, 3:23 pm, vakata <ivan.bozha...@gmail.com> wrote:
> Hi,
>
> Just use one of those:
> $.jstree.focused().select_node("#node_id");
> $("selector > .to #tree-container").jstree("select_node","#node_id");
>
> Kindest regards,
> Ivan
>
> On 11 Юни, 21:19, curt <curt.kie...@gmail.com> wrote:
>
> > I'm migrating to the v1rc...This is probably simple, however I've not

> > figured it out. Is there any way toprogrammaticallyselect a node

[vakata]

Can you please paste your full config so that I can help you?

Kindest regards,
Ivan

[curt]

My tree container is <div id="getStartedTree">

My jsTree code
$("#getStartedTree").jstree({
"themes": {
"theme": "default",
"url": "../App_Css/Themes/Default/style.css",
"dots": true,
"icons": true
},
"json_data": {
"ajax": {
"url": "../SiteMaps/TextFile.txt",
"dataType": "json",
"data": function(n) {
return { id: n.attr ? n.attr("id") : 0 };
}
}
},
"plugins": ["themes", "json_data", "ui"]
});

The JSON in the TextFile.txt - borrowed from your simple example

[
{
"data" : "A node",
"children" : [ "Child 1", "Child 2" ]
},
{
"attr" : { "id" : "test1" },
"data" : {
"title" : "Long format demo",
"attr" : { "id" : "test2", "href" : "#" }
}
}
]

The tree will populate as expected

Here's the select_node Binding - where I redirect to a new page. Also
note I use the "cookies" not "cookie" plugin in my project. so I was
not able to use your jstree functionality for state management. My
work around would be to set a cookie for the node that was selected.
My page then redirects to the new page, and I would read the cookie,
and programmatically select the node.

$("#getStartedTree").bind("select_node.jstree", function(event, data)
{
var href = data.rslt.obj.attr("href");
var path = window.location.href.toLowerCase();

//$.cookies.set('selectedNode', selectedNode);

var loc = path.indexOf('mywebsite');
loc = loc + 10; // mywebsite/ char count
var root = path.substring(0, loc);
window.location.href = root + href;
});

I was then attempting to read the cookie, get its selected value, so
that I could programmatically select.
thus first I was just trying to something like this, which I basically
try and select test2.
In firebug I see that the the ids "test1" is for a list item, and
"test2" for the anchor.

jQuery($("#getStartedTree")).jstree("select_node", $("#test2"));

Upon programatic selection I would then expect to see it styled blue,
however it always seems as if nothing is selected.

This failed, and I tried a slew of "desperation" variations, however I
could not figure it out....then I asked for help, then I tried to get
your solution to work. Unfortunately I was still unsuccessful. : (

I hope I'm not doing something incredibly stupid that I'll be totally
embarrassed over..

I REALLY appreciate your help! : )

[curt]

My original json is as follows... I was then using your simple json
example with node id's to try and determine how best to select a node
via some unique identifier, such as an id, or a title.

[
{ "data" : "Welcome to the Website", "attr" : { "href" : "App_User/
Welcome.aspx" }},
{ "data" : "Search By", "attr" : { "href" : "App_User/
SearchBy.aspx" }},
{ "data" : "Reports", "attr" : { "href" : "App_User/
mnu_Reports.aspx" }},
{ "data" : "My Account", "attr" : { "href" : "App_User/
mnu_MyAccount.aspx" }, "state" : "open", "children" :
[ {
"data" : "Change E-mail", "attr" : { "href" : "App_User/
ChangeEmail.aspx" }}, {
"data" : "Change Password", "attr" : { "href" : "App_User/
ChangePassword.aspx" }
} ]
},
{ "data" : "Contact Us", "attr" : { "href" : "App_User/
ContactUs.aspx" }},
{ "data" : "Downloads", "attr" : { "href" : "App_User/
Downloads.aspx" }},
{ "data" : "Help", "attr" : { "href" : "App_User/Help.aspx" }}
]

[vakata]

Hi,

First off you can use this:
jQuery("#getStartedTree").jstree("select_node", "#test2");

and secondly - when are you calling this? If you are calling this
exactly after the setup of the tree it is natural that nothing
happens, as the tree is not yet loaded (it will download the json,
parse it, display it, and after that it is ready to use).
Since you are using the UI plugin bind to the "reselect" event
(otherwise you could use the "loaded" event) and call your select from
there:

jQuery("#getStartedTree").bind("reselect.jstree", function () {
jQuery("#getStartedTree").jstree("select_node", "#test2");
});

Try this and tell me if it works.

Cheers,
Ivan

[curt]

That works!... however, I'm now getting an infinite loop:

I searched the forums and found you had written this (below) to help
another user, and I've been trying to get it to work for me. This
person was using the ui plugin with initially_select. I've tried
option 2 and 3 with no luck... and I know the problem is me just not
"getting it" yet. As you probably can already tell, I'm still climbing
the jquery/javascript learning curve. I will keep at it! I can't
thank you enough for helping me through this.

1) you could lose the UI plugin and just apply the "jstree-clicked"
class to the A nodes.

2) or you could bind to the "select_node" event after the "reselect"
event has fired:
$("#tree").bind("reselect.jstree", function() {
$("#tree").bind("select_node.jstree", function () { .... });

})

3) or you could use a var:
$(function () {
var ready = false;
$("#tree")
.bind("reselect.jstree", function() { ready = true; })
.bind("select_node.jstree", function() { if(ready) { .... } });

});

[curt]

I think I got it.

here is the code for anyone in the future... it seems to be working.
$(function() {
var ready = false;
$("#getStartedTree")
.bind("reselect.jstree", function() {
var selectedNode = $.cookies.get('mySelectedNode');

jQuery("#getStartedTree").jstree("select_node",

selectedNode);
ready = true;
})
.bind("select_node.jstree", function(event, data) {
if (ready) {

var href = data.rslt.obj.attr("href");
var path = window.location.href.toLowerCase();

//alert(data.inst.get_text(data.rslt.obj));

var nodeId = data.rslt.obj.attr("id");
$.cookies.set('mySelectedNode', "#" + nodeId);

var loc = path.indexOf('mywebsite');
loc = loc + 10; // mywebsite/ char count
var root = path.substring(0, loc);
window.location.href = root + href;
}
});

});

[Md. Amanullah Nippon]

I have another request. I post a config then how I select node programmatically

<div style="background: #FFFFFF" class="demo jstree jstree-5" id="treeView">
</div>

<script type="text/javascript">
    $(function () {
        $("#search").click(function () {
            $("#treeView").jstree("search", document.getElementById("LevelName").value);
        })
    });
    $(function () {
        $("#treeView")

        .jstree({
            "plugins": [
                "themes", "json_data", "ui", "crrm", "cookies", "dnd", "search", "types", "hotkeys"
            ],

            "json_data": {
                "ajax": {
                    "url": "@Url.Action("GetTreeData")",
                    "data": function (n) {
                        return {
                            "operation": "get_children",
                            "id": n.attr ? n.attr("id").replace("node_", "") : 1
                        };
                    }
                }
            },
            "search": {
                "ajax": {
                    "url": "@Url.Action("GetTreeData")",
                    "data": function (str) {

                        return {
                            "operation": "search",
                            "search_str": str
                        };
                    }
                }
            },
            "types": {
                "max_depth": -2,
                "max_children": -2,
                "valid_children": ["drive"],
                "types": {
                    "default": {
                        "valid_children": "none",
                        "icon": {
                        }
                    },
                    "folder": {
                        "valid_children": ["default", "folder"],
                        "icon": {
                            "image": "d.png"
                        }
                    },
                    "drive": {
                        "valid_children": ["default", "folder"],
                        "icon": {
                            "image": "file.png"
                        },
                        "start_drag": false,
                        "move_node": false,
                        "delete_node": false,
                        "remove": false
                    }
                }
            },
            // UI & core - the nodes to initially select and open will be overwritten by the cookie plugin

            // the UI plugin - it handles selecting/deselecting/hovering nodes
            "ui": {
                // this makes the node with ID node_4 selected onload
                "initially_select": ["node_4"]
            },
            // the core plugin - not many options here
            "core": {
                // just open those two nodes up
                // as this is an AJAX enabled tree, both will be downloaded from the server
                "initially_open": ["node_2", "node_3"]
            },
           
        })     

    });

</script>