jstree - node selection based on current navigated url

Question

Today I'm using the built-in cookies of the jsTree in order to preserve user navigations in the tree.

on node click in the tree the user is redirected to the corresponding page in my site and the clicked node is selected/highlighted thanks to the jsTree cookies integration.

Now, I would like to to select/highlight nodes in the tree also based on a navigation among the web site, i.e., a link in the site might also be a node in the tree, for example, a grid of rows that also appears in the tree.

The question is how can I do this 'manually' node selection/highlighting and I also think that I should know from where the user arrived to the page, from the tree or from some other link in the site.

Thanks,

Is the functionality that you are looking for not provided by the jsTree UI Plugin? If not, I believe jsTree is simply adding/removing css styles to get its visual effects. You should just be able to find out what the class names are and apply them manually as desired. — Paula Bean, Dec 13 '11 at 18:31
it is not just about css style, but also DOM manipulation such as open/close nodes etc. — Yair Nevet, Dec 14 '11 at 06:54
It has been a while since I worked with jsTree, but I think that even open/closing nodes is handled by CSS classes. Its just a matter of selecting the one that you want and applying the correct class. — Paula Bean, Dec 14 '11 at 15:24
Can you clarify the question at all? It's pretty straightforward to open, close and restyle jsTree nodes on the fly or at load. I'm happy to give a detailed example but I'm not sure what it is precisely that your looking for -- a way to control the state of jsTree nodes from links outside the tree? When a link is clicked, is the browser navigating to a new page or is content loaded async? Perhaps you can provide some code to look at? — Daniel Mendel, Dec 15 '11 at 06:03

King Friday · Accepted Answer · 2011-12-18T15:29:33.033

I already built a complete approach for this using jsTree, hashchange event and actual real SEO-able URLs so this would fit into your idea quite simply and you could toss your cookies but not in a bad way. This also works with bookmarking and arriving from a URL as it looks through the nodes then matches the links to select the node. This is best with AJAX though as it should be when possible.

I'm commenting this for you so you can understand it. The working example is here www.kitgui.com/docs that shows all the content.

$(function () {
        // used to remove double reload since hash and click are intertwined
    var cancelHashChange = false,
        // method sets the selector based off of URL input
    setSelector = function (path) {
        var startIndex = path.indexOf('/docs');
        if (startIndex > -1) {
            path = path.substr(startIndex);
        }
        path = path.replace('/docs', '').replace('/', '');
        if ($.trim(path) === '') { path = 'overview'; }
        return '.' + path;
    };
        // sets theme without the folders, plain jane
    $('.doc-nav').jstree({
        "themes": {
            "theme": "classic",
            "dots": true,
            "icons": false
        }
    }).bind("loaded.jstree", function (event, data) {
        // when loaded sets initial state based off of priority hash first OR url
        if (window.location.hash) { // if hash defined then set tree state
            $.jstree._focused().select_node(selector);
            $(setSelector(window.location.hash.substr(1)) + ' a:first').trigger('click');
        } else { // otherwise base state off of URL
            $.jstree._focused().select_node(setSelector(window.location.pathname));
        }
    });
        // all links within the content area if referring to tree will affect tree
        // and jump to content instead of refreshing page
    $('.doc-nav a').live('click', function (ev) {
        var $ph = $('<div />'), href = $(this).attr('href');
        ev.preventDefault();
        cancelHashChange = true;
            // sets state of hash
        window.location = '#' + $(this).attr('href');
        $('.doc-content').fadeOut('fast');
            // jQuery magic load method gets remote content (John Resig is the man!!!)
        $ph.load($(this).attr('href') + ' .doc-content', function () {
            cancelHashChange = false;
            $('.doc-content').fadeOut('fast', function () {
                $('.doc-content').html($ph.find('.doc-content').html()).fadeIn('fast');
            });
        });
    });
        // if doc content is clicked and has referring tree content, 
        // affect state of tree and change tree content instead of doing link
    $('.doc-content a').live('click', function (ev) {
        ev.preventDefault();
        if ($(this).attr('href').indexOf('docs/') > -1) {
            $.jstree._focused().select_node(setSelector($(this).attr('href')));
            $(setSelector($(this).attr('href')) + ' a:first').trigger('click', false);
        }
    });
        // if back/forward are used, maintain state of tree as if it was being clicked
        // refers to previously defined click event to avoid double-duty
        // but requires ensuring no double loading
    window.onhashchange = function () {
        if (cancelHashChange) { cancelHashChange = false; return; }
        $.jstree._focused().select_node(setSelector(window.location.hash.substr(1)));
        $(setSelector(window.location.hash.substr(1)) + ' a:first').trigger('click', false);
    };
    $('#top-doc-link').closest('li').addClass('active');
});

Feel free to ask me if you have more questions.

jstree - node selection based on current navigated url

1 Answers1

Linked