We Keep Coding

Jstree clear search does but keep nodes open

I initially had a simple jstree where all data was loaded at initialization.
$("#tree").jstree().search(searchString)
and
$("#tree").jstree("clear_search")
was working perfectly fine.
Now I have larger tree with lazy loading. My tree configuration is as follows
{
"core": {
"check_callback": true,
"loaded_state": true,
"data": {
"url": "http://x.x.x.x:9000/yang/loadOneLevel",
"dataType": "json"
},
"worker": false
},
"plugins": [
"massload",
"search",
"state"
],
"massload": {
"method": "post",
"url": "http://x.x.x.x:9000/yang/massLoadTree",
"dataType": "json"
},
"search": {
"ajax": {
"url": "http://x.x.x.x:9000/yang/searchTree",
"dataType": "json"
}
}
}
Now I perform search and clear as follows
$("#tree").jstree('search', searchString, false, false,[],false);
$("#tree").jstree("clear_search");
The search results are showing up fine. However, on clearing search, the nodes which opened to show search results close off.
Is there a way to keep all nodes open and just remove the css added for search matches?

Is it possible to load, then select a child node if the parent node is unknown to the tree?

I am using jsTree as a navigator for the user to select different items which display in another pane. So far everything is working as expected except if the user (from the other pane) selects an item that hasn't been loaded into the tree yet.
The Tree is currently getting all of its data from AJAX.
I have tried using the open_node() and load_node() functions but they have no effect if the parent node is not loaded.
My question: is it possible to load, then select a child node if the parent node is unknown to the tree? If not, are there any workarounds to achieve a similar effect?
EDIT:
Tree initializer:
$('#jsTree-Location').jstree({
"core": {
"animation": 0,
"check_callback": true,
"themes": {
"stripes": true,
"icons": true
},
"data": {
'url': '#Url.Action("LocationList", "Location")',
'type': 'GET',
'dataType': 'JSON',
'contentType': 'application/json',
'data': function (node) {
return { sID: node.id, sType: node.type };
}
}
},
"json_data": {},
"plugins": [
"contextmenu", "dnd", "search",
"state", "wholerow", "types"
],
"state": { "key": "system" },
"contextmenu": { items: customMenu },
"types": {
"default": {
"icon": "glyphicon glyphicon-flash"
},
"location": {
"icon": "fas fa-map-marker-alt"
},
"asset": {
"icon": "fa fa-cube"
},
"link": {
"icon": "fa fa-cube"
},
"system": {
"icon": "fas fa-cogs"
}
}
}})
Function called when user 'externally' selects a node
function DisplayAsset(id) {
ShowSpinner($("#window"), "Loading Asset...");
//If Location Tree is active, activate the Asset in it.
var sysTree = $('#jsTree-Location').jstree().get_selected()[0]
if (typeof sysTree !== "undefined") {
$("#jsTree-Location").jstree().open_node(['#asset-' + id, '#link-' + id], function (node, status) {
if (status) {
$("#jsTree-Location").jstree().activate_node(node)
}
})
}
//AJAX call to get Asset partial display
$.ajax({
url: '/Assets/_AssetEdit/',
type: 'GET',
data: {
'id': id
},
success: function (html) {
HideSpinner($("#window"));
$("#window").html(html)
BuildTable();
}
})
}

jstree - tree nodes are recreated after adding a new node or removing an existing one

i built a tree with nodes using jstree. the user can choose the color background of the node with a colorpicker in the contextmenu.
Unfortunately i noticed that when a new node is created or another one removed, the tree seems to be recreated. indeed css stuff get lost and things added in node.data too.
how can i prevent this?
this is my code:
function treeCreation(){
var core = {
'check_callback': true,
};
var plugins = [
"contextmenu", "dnd", "search",
"state", "types", "wholerow"
];
var types = {
"default": {
'max_depth': 1
}
};
var contextmenu = {
"items": function($node) {
var tree = $("#tree").jstree(true);
return {
"Create": {
"separator_before": false,
"separator_after": false,
"label": "Create",
"action": function (obj) {
$node = tree.create_node($node);
tree.edit($node);
}
},
"Rename": {
"separator_before": false,
"separator_after": false,
"label": "Rename",
"action": function (obj) {
tree.edit($node);
}
},
"Remove": {
"separator_before": false,
"separator_after": false,
"label": "Remove",
"action": function (obj) {
tree.delete_node($node);
}
},
"Color": {
"separator_before": false,
"separator_after": false,
"label": "Color",
"action": function (obj) {
$('#colorpicker').trigger('click');
}
}
};
}
};
var animation = 400;
$('#tree').jstree({
"plugins" : plugins,
'core': core,
'animation': animation,
'types': types,
'contextmenu': contextmenu
});
}
i added custom callbacks because i needed to manipulate strings for translating the context-menu. Maybe it depends on that?

Browser-sync reload constantly

I am creating project with JS, HTML, CSS and I am trying to makes my workflow faster and easier, so I decide to install browser-sync to help with auto-reloading page during coding process. And that would be great solution but browser-sync constantly after 30-60 sec reloading my page, what is annoying because during debugging when I change something in google chrome dev tools, like css properties, browser reload and changes gone. This is how I start browser-sync
browser-sync start --server --files .
And this is my bs-config.js
module.exports = {
"ui": {
"port": 3001,
"weinre": {
"port": 8080
}
},
"files": ["./css/*.css", "./scripts/*.js", "./*.html"],
"watchEvents": [
"change"
],
"watchOptions": {
"ignoreInitial": false
},
"server": false,
"proxy": false,
"port": 3000,
"middleware": false,
"serveStatic": [],
"ghostMode": {
"clicks": true,
"scroll": true,
"location": true,
"forms": {
"submit": true,
"inputs": true,
"toggles": true
}
},
"logLevel": "info",
"logPrefix": "Browsersync",
"logConnections": false,
"logFileChanges": true,
"logSnippet": true,
"rewriteRules": [],
"open": "local",
"browser": "default",
"cors": false,
"xip": false,
"hostnameSuffix": false,
"reloadOnRestart": false,
"notify": true,
"scrollProportionally": true,
"scrollThrottle": 0,
"scrollRestoreTechnique": "window.name",
"scrollElements": [],
"scrollElementMapping": [],
"reloadDelay": 0,
"reloadDebounce": 0,
"reloadThrottle": 0,
"plugins": [],
"injectChanges": true,
"startPath": null,
"minify": true,
"host": null,
"localOnly": false,
"codeSync": true,
"timestamps": true,
"clientEvents": [
"scroll",
"scroll:element",
"input:text",
"input:toggles",
"form:submit",
"form:reset",
"click"
],
"socket": {
"socketIoOptions": {
"log": false
},
"socketIoClientConfig": {
"reconnectionAttempts": 50
},
"path": "/browser-sync/socket.io",
"clientPath": "/browser-sync",
"namespace": "/browser-sync",
"clients": {
"heartbeatTimeout": 5000
}
},
"tagNames": {
"less": "link",
"scss": "link",
"css": "link",
"jpg": "img",
"jpeg": "img",
"png": "img",
"svg": "img",
"gif": "img",
"js": "script"
}
};
I didn't add any configs to it. I was trying to find solution but nothing help.
What I want is to reloading page only when I make and save changes to .htm, .css, .js files and I thought that is default behavior for browser-sync.

JsTree check nodes

I have saved checked nodes in cookies with this code:
$.cookie('q_cats', $("#category-tree").jstree("get_checked"), { expires: 7 });
I am loading my tree with this code:
$('#category-tree').jstree({
"plugins": ["wholerow", "checkbox", "search"],
"core": {
"themes": {
"responsive": false
},
"data": {
"url": "/blogs/get_cats/",
"dataType": "json"
}
}
});
I don't know how can check saved nodes in my tree

Why don't you use the state plugin - it does exactly that - restore state across refreshes / reloads. Just look it up, all you need to do is add a string to your config (plugins section):
$('#category-tree').jstree({
"plugins": ["wholerow", "checkbox", "search", "state"],
"core": {
"themes": {
"responsive": false
},
"data": {
"url": "/blogs/get_cats/",
"dataType": "json"
}
}
});