jsTree: with lazy loading the plugin "dnd" is not working - jstree

I'm using jsTree (latest version) in my web app. I have a lot of nodes to display in the tree, so I am using lazy loading otherwise I would run into a time out.
When the tree is loaded, the user can pick values from a second tree and move them into the lazy loaded tree (jsTree plugin "dnd"). Both tree have the jsTree plugin "dnd" installed. But I can not drop a element into the lazy loaded tree, when I try to do so the node to be dropped is having an icon with a red cross (indication: not allowed here).
This is the code for the lazy loaded tree:
$('#target_tree').jstree({
'core' : {
'data' : {
"url" : "get_current_hierachy",
"data" : function (node) {
return {'p_parent_id': node.id};
},
"dataType": "json",
"check_callback": true
}
},
"plugins" : ["dnd"]
});
When I load some data in the first tree without the lazy loading, the drag'n'drop is working as expected.
When I load data in the first tree with lazy loading, the drag'n'drop is not working any more.
Any help would be greatly appreciated.

Try this ...
$(document).ready(function () {
$('#target_tree').jstree({
'core': {
'data': {
"url": function (node) {
var url;
if (node.id == '#') {
url = "getRootNode";
} else {
var id = $(node).data("id");
url = "getChildNode?nodeid=" + id;
}
return url;
},
"data": function (node) {
return { "id": node.id };
},
"type": "GET",
"dataType": "json",
"contentType": "application/json charset=utf-8",
},
'check_callback': true,
},
"plugins": ["dnd"]
});
});
I think you need to prepare url

Related

Problems with programmatically selecting node in jsTree on page start-up

I can't select a tree element on page start-up. There is a JSFiddle with the setup: https://jsfiddle.net/voltel/aszn3h46/
My data is JSON array:
const a_data = [
{
"id": "1296",
"text": "Disposable and Single-Use Medical Supplies",
"children": null
},
{
"id": "1275",
"text": "Implantables",
"children": [
{
"id": "1276",
"text": "Defibrillators, Implantable",
"children": null
},
{
"id": "1338",
"text": "Analysers, Laboratory In-Vitro Diagnostic, Clinical Chemistry, Manual",
"children": null
},
]}
];
// Rest of JavaScript code
const $tree = $("#display");
$tree.jstree({
'plugins' : [ "wholerow", "checkbox" ],
'core': {
data : a_data
},
'checkbox': {
three_state: false
},
});
//
// The problem: I can't select/check node with this id
const c_icd_device_type = "1338";
// show initial value
if (c_icd_device_type) {
console.log(`Request to select node with id ${c_icd_device_type}`);
const o_selected_node = $tree.jstree('get_node', c_icd_device_type);
console.log('Selected node: ', o_selected_node);
// Uncomment ONE of the following:
if (o_selected_node) {
$tree.jstree('select_node', o_selected_node, true);
} else {
$tree.jstree(true).select_node(c_icd_device_type);
}//endif
}//endif
Please, help select a node on start-up, and get rid of some suspicious errors in console (see JSFiddle).
Now, I understand from other questions on jsTree here on StackOverflow, that if wrap my code selecting an element in an event handler, it works. I don't quite understand why it is so complicated, provided there are no asynchronous calls. And if it's unavoidable, why not use Promise?
$tree.on('ready.jstree', function (e, data) {
console.log(`Request to select node with id ${c_icd_device_type}`);
const o_selected_node = data.instance.get_node(c_icd_device_type);
//const o_selected_node = $tree.jstree('get_node', c_icd_device_type);
console.log('Selected node: ', o_selected_node);
// Uncomment ONE of the following:
if (o_selected_node) {
$tree.jstree('select_node', o_selected_node, true);
} else {
$tree.jstree(true).select_node(c_icd_device_type);
}//endif
});
I don't see any errors in console on Chrome:
Your code is fine. It just that the tree isn't ready yet. If you wrap your existing code inside ready.jstree event, it'll work.
$tree.on('ready.jstree', function (e, data) {
// Copy line 38 onward and place your existing code here
});

How to dynamically bind an existing OpenUI5 Combobox?

I'm evaluating OpenUI5 and I'm not clear about the binding concept.
In a XML login view, I have a Combobox that I want to populate after a successful login:
<ComboBox id="cboJoraniInstance" enabled="false" />
So, into my controller I've created an Ajax call with a parameter:
return Controller.extend("sap.ui.jorani.wt.controller.Login", {
onCheckEmail : function () {
var oDialog = this.getView().byId("BusyDialog");
oDialog.open();
var sMail = this.getView().byId("txtEmail").getValue();
var oListInst = this.getView().byId("cboJoraniInstance");
var aData = jQuery.ajax({
type : 'POST',
url : 'http://localhost/dummy/getJoraniInstances.php',
data: {
mail: sMail
},
async: false,
success : function(data,textStatus, jqXHR) {
//Link Combobox
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data);
oListInst.setModel(oModel);
oListInst.bindElement("/Instances");
oListInst.bindProperty("value", "Url");
oListInst.bindProperty("name", "name");
oListInst.setEnabled();
},
error: function (jqXHR, textStatus, errorThrown){
MessageToast.show('An error occured');
}
});
oDialog.close();
},
});
The call to my web service is OK and returns:
{
"Instances": [{
"Name": "Local",
"IsDefault": true,
"Url": "http:\/\/localhost\/jorani\/"
}, {
"Name": "D\u00e9mo",
"IsDefault": false,
"Url": "https:\/\/demo.jorani.org\/"
}]
}
The code executes without error, but the control is not filled by my binding attempts.
I've checked the various SO questions on this topic and they all add a new ComboBox into the view dynamically, for example:
oListInst.placeAt("content");
But that is not what I want to achieve, I'd like to fill an existing object. Is it possible?
Concerning the view, if I fill the Combobox with the code below, it is working fine (but it doesn't use the binding feature):
$.each(data.Instances, function(i, obj) {
oListInst.addItem(new sap.ui.core.ListItem({key:obj.Url, text:obj.Name}));
});

jsTree state plugin reloads page continually

I'm using jsTree as a navigation menu, and after clicking any of the links the page reloads over and over... I've searched all day for an answer to this and would very much appreciate a hand.
$('#NavTreeContainer').jstree({
'core': {
'themes': {
'name': 'default',
'responsive': true,
'stripes': true,
'dots': true,
'icons': false
}
},
'state' : { 'key' : 'navTree' },
'plugins' : [ 'state' ]
}).on('select_node.jstree', function(e, data) {
document.location = data.instance.get_node(data.node, true).children('a').attr('href');
});
$('#ExpandAllNavTreeButton').click(function() {
$('#NavTreeContainer').jstree('open_all');
});
$('#CollapseAllNavTreeButton').click(function() {
$('#NavTreeContainer').jstree('close_all');
});
I was able to get this functionality working by only binding the select node event after the tree state has been restored;
$('#jstree_id').jstree({
"state": { "key": "jstree_id" },
"plugins": ["state"]
}).on('restore_state.jstree', function () {
$('#jstree_id').on('select_node.jstree', function (e, data) {
var href = data.node.a_attr.href;
document.location.href = href;
});
});
If you already solved this I hope it helps someone else.

How do I pass a JSON object from one controller to another(/view to view)?

I want to pass a JSON object from one controller to another. How do I do that?
Or can I pass a oModel to the other view? If so how do I do that?
Thanks
If you store your data in a global model:
var oData = <your JSON data>;
var oModel = new sap.ui.model.json.JSONModel(oData);
sap.ui.getCore().setModel(oModel);
it can then be accessed from any other controller/view in your application context
one solution is that you use sap.ui.core.EventBus. Basically you can pass any object from one controller to another including JSONModel using subscribe and publish.
To add to Qualiture's answer:
If you wanted to attach a specific model to a specific view, which your question sounds like a little, you can do just that by going:
view.setModel(oModel);
Cheers
Michel
yes,you can pass string,object and Array from one view to another through the Navigation.
enter code here
enter code here for controller
handleLinkPress: function(oEvent) {
try {
var array = [];
var obj = {
"Delivery": "80000095",
"DelvNo": "80000095",
"Date": "2018-01-04T00:00:00.000Z",
"Priority": "00",
"LoadDate": "2018-01-04T00:00:00.000Z",
"PickDate": "2018-01-04T00:00:00.000Z",
"ShippingPoint": "0001",
"Route": "",
"LoadingPoint": "01",
"ShipTo": "CUSTOMER",
"SoldTo": "CUSTOMER"
};
array.push(obj);
if (obj !== null) {
sap.ui.core.UIComponent.getRouterFor(this).navTo("Route", {
RouteData: JSON.stringify(array)
});
}
} catch (e) {
console.error("Error : " + e.message);
sap.m.MessageBox.show(e.message, {
icon: sap.m.MessageBox.Icon.ERROR,
title: "Error",
actions: [sap.m.MessageBox.Action.OK],
defaultAction: sap.m.MessageBox.Action.OK,
styleClass: "sapUiSizeCompact",
contentWidth: "150px"
});
}
}
Code for manifest.json
{
"pattern": "Route/{RouteData}",
"name": "Route",
"targetControl": "masterView",
"viewId": "Route",
"viewName": "Route"
}
code for the controller where you get that Array which you want pass
handleCloseRoutePress: function(oEv)
{
var sRouteData=JSON.parse(oEv.getParameter("arguments").RouteData);
}

How to get all versions of an object in Google cloud storage bucket?

In a web page hosted in Google cloud storage, I will like to show revision history, which require listing all versions of the object.
Sending GET request to the bucket with ?versions parameter return list versions all objects. Is there any way to list all versions of a single object, as in gsutil ls -la, in javascript?
There is not. The closest you can do is to use versions=true and prefix=YOUR_OBJECT_NAME.
GCS will respond with a listing of objects beginning with all of the versions of your object and continuing on to any other objects that begin with YOUR_OBJECT_NAME. You'll have to check those items to see when the listing runs out of versions of your object and moves on to other objects.
If it so happens that only one object begins with YOUR_OBJECT_NAME (for example, your object is "foo.txt" and there are no files named, say, "foo.txt.backup", you will get exactly the files you want. You probably don't want to rely on this as a general practice, though.
Brondon's answer work with XML, but not with gapi client.
/**
* Get versions meta data of the object.
* #return {goog.async.Deferred} return history of the object.
*/
mbi.data.Object.prototype.history = function() {
var df = new goog.async.Deferred();
var use_gapi = true;
var name = this.getName();
if (use_gapi) {
// GAPI does not return result for versions request.
var params = {
'bucket': this.getBucketName(),
'versions': true,
'prefix': name
};
// console.log(params);
var req = gapi.client.rpcRequest('storage.buckets.get',
mbi.app.base.GAPI_STORAGE_VERSION, params);
req.execute(function(json, row) {
if (json) {
df.callback(json);
} else {
df.errback();
throw new Error(row);
}
});
} else {
var xm = mbi.data.Object.getXhr();
var uri = new goog.Uri(this.getUrl());
uri.setParameterValue('versions', 'true');
uri.setParameterValue('max-keys', '25');
uri.setParameterValue('prefix', name);
var url = uri.setPath('').setFragment('').toString();
xm.send(url, url, 'GET', null, {}, 1, function(e) {
var xhr = /** #type {goog.net.XhrIo} */ (e.target);
if (xhr.isSuccess()) {
var xml = xhr.getResponseXml();
// console.log(xml);
var json = mbi.utils.xml.xml2json(xml);
var items = json['ListBucketResult']['Version'];
var versions = goog.isArray(items) ? items : items ? [items] : [];
versions = versions.filter(function(x) {
return x['Key'] == name;
});
df.callback(versions);
} else {
df.errback(xhr.getStatus() + ' ' + xhr.getResponseText());
}
});
}
return df;
};
GAPI return as follow without version meta:
[
{
"id": "gapiRpc",
"result": {
"kind": "storage#bucket",
"id": "mbiwiki-test",
"name": "mbiwiki-test",
"timeCreated": "2013-08-20T01:18:46.957Z",
"metageneration": "9",
"owner": {
"entity": "group-00b4903a97262a358b97b95b39df60893ece79605b60280ad389c889abf70645",
"entityId": "00b4903a97262a358b97b95b39df60893ece79605b60280ad389c889abf70645"
},
"location": "US",
"website": {
"mainPageSuffix": "index.html",
"notFoundPage": "error404.html"
},
"versioning": {
"enabled": true
},
"cors": [
{
"origin": [
"http://static.mechanobio.info",
"http://mbinfo-backend.appspot.com",
"https://mbinfo-backend.appspot.com",
"http://localhost",
"chrome-extension://pbcpfkkhmlbicomenogobbagaaenlnpd",
"chrome-extension://mhigmmbegkpdlhjaphlffclbgkgelnbe",
"chrome-extension://jhmklemcneaienackijjhdikoicmoepp"
],
"method": [
"GET",
"HEAD",
"POST",
"PUT",
"DELETE",
"PATCH"
],
"responseHeader": [
"content-type",
"Authorization",
"Cache-Control",
"x-goog-meta-reviewer"
]
}
],
"storageClass": "STANDARD",
"etag": "CAk="
}
}
]