Edited: checkbox check_node won't fire - jstree

Here is my fiddle. https://jsfiddle.net/NervousElk/6scrbkex/12/.
The tree nodes are populated just fine but I cannot find a way to detect which checkbox is then selected/deselected by the user.
<!DOCTYPE html>
<html>
<head>
<title>testver</title>
<link rel = "stylesheet" href="css/jstree/themes/default/style.min.css">
</head>
<body>
<script src = "jquery-3.3.1.min.js"></script>
<script src = "jquery.js"></script>
<script src = "jstree.min.js"></script>
<div id="staffallocatertree">
</div>
<button id = "treetestbtn" >Build tree
</button>
<script>
document.getElementById("treetestbtn").addEventListener("click", buildthetree);
function buildthetree()
{
//$('#staffallocatertree').jstree('refresh');
$('#staffallocatertree').jstree(
{
'plugins': [ "checkbox", "themes", "sort", "ui", "state" ],
'core' :
{
"check_callback": true,
/* 'data' :
{
"url" : "tl2_get_allstaff_as_tree.php",
"dataType" : "json"
}, */
'data' :
[
{ "id" : "ajson1", "parent" : "#", "text" : "Department 1" },
{ "id" : "ajson2", "parent" : "#", "text" : "Department 2" },
{ "id" : "ajson3", "parent" : "ajson2", "text" : "Dave" },
{ "id" : "ajson4", "parent" : "ajson2", "text" : "Jim" },
],
"checkbox": {
"three_state" : false, // to avoid that fact that checking a node also check others
"whole_node" : false, // to avoid checking the box just clicking the node
"tie_selection" : false // for checking without selecting and selecting without checking
},
//"plugins": ['checkbox']
},
})
.on("check_node.jstree uncheck_node.jstree", function(e, data)
{
alert(data.node.id + ' ' + data.node.text + (data.node.state.checked ? ' CHECKED': ' NOT CHECKED'))
})
};
</script>
</body>
</html>
After the tree is populated I want to interact with the checkboxes and detect the node and text for later use. To this end I am trying to get the check_node/ uncheck_node to fire.
Thanks for any pointers.

Surprisingly this seems to be an open issue .
Fortunately the provided answer works, which is to listen on select_node.jstree.
In your case, simply change
.on("check_node.jstree uncheck_node.jstree", function(e, data) {})
to
.on("select_node.jstree unselect_node.jstree", function(e, data) {})
Hope it helps !

Related

Query providing different results on Cosmos (vs Pure Mongo)

I have a Mongo collection which has this document structure:-
{
"_id" : ObjectId("5d5e5f1dfc325d4018302293"),
"status" : "PENDING",
"workflowJourney" : [
{
"_id" : ObjectId("5d5e5f1dfc325d401830229c"),
"workflowDate" : ISODate("2019-08-22T09:23:41.491Z"),
"workflowType" : "Email",
"workflowDescription" : "Email sent to Joe Bloggs",
"workflowRecipient" : {
"employeeNumber" : "12345",
"firstName" : "Joe",
"surname" : "Bloggs",
"emailAddress" : "joe.blogs#example.com"
},
"workflowSubject" : "Invoice Approval Required (2112)",
"workflowHtmlContent" : "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitiona..."
},
{
"_id" : ObjectId("5d5e5f1dfc325d401830229d"),
"workflowDate" : ISODate("2019-08-22T09:23:41.507Z"),
"workflowType" : "Email",
"workflowDescription" : "Email sent to Jane Bloggs",
"workflowRecipient" : {
"employeeNumber" : "56789",
"firstName" : "Jane",
"surname" : "Bloggs",
"emailAddress" : "jane.bloggs#example.com"
},
"workflowSubject" : "Invoice Approval Required (2112)",
"workflowHtmlContent" : "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitiona..."
}
],
"approvals" : [],
"__v" : 1
}
I'm trying to create a query which will get a single workflowJourney. At the point of executing the query, I will already know the _id of both the main document and the workflowJourney subdocument, so I could use either/both of of these in my query.
The issue is, for this development project we are using Azure Cosmos and the query that I would expect to work is giving strange results.
If I run this in pure Mongo:-
db.getCollection('Invoices').find(
{"workflowJourney._id": ObjectId("5d5e5fd907ba93320cc54198")},
{"workflowJourney.$": 1.0}
);
I get this nice result back:-
{
"_id" : ObjectId("5d5e5f1dfc325d4018302293"),
"workflowJourney" : [
{
"_id" : ObjectId("5d5e5f1dfc325d401830229d"),
"workflowDate" : ISODate("2019-08-22T09:23:41.507Z"),
"workflowType" : "Email",
"workflowDescription" : "Email sent to Jane Bloggs",
"workflowRecipient" : {
"employeeNumber" : "56789",
"firstName" : "Jane",
"surname" : "Bloggs",
"emailAddress" : "jane.bloggs#example.com"
},
"workflowSubject" : "Invoice Approval Required (2112)",
"workflowHtmlContent" : "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitiona..."
}
]
}
Running the same query in Azure Cosmos (database contains the same data), I get this:-
{
"_id" : ObjectId("5d5e5f1dfc325d4018302293"),
"workflowJourney" : [
{},
{}
]
}
So, no useful results. I know that Cosmos DB is more of a Mongo emulator rather than a pure implementation. But I guess what I am trying to achieve is a fairly common scenario; I wonder if anyone has any suggestions on how I could re-write my query to get the result I need?
Many thanks
Glen
Okay, so I've achieved what I need to do by doing the filtering from the Node level instead. I guess the filter queries are really designed for returning entire documents rather than filtering information from within a single document.
Example:-
router.get('/emailPreview/:invoiceId/:workflowJourneyItemId', (req, res, next) => {
Invoice.findOne({ "_id": req.params.invoiceId })
.then(invoice => {
if(invoice) {
const emailHtml = invoice.workflowJourney.filter((item) => {
return item.id === req.params.workflowJourneyItemId;
})[0].workflowHtmlContent;
res.status(200).set('Content-Type', 'text/plain').send(emailHtml);
} else {
res.status(404).json({ Error: 'Email not found'});
}
}).catch(err => {
res.status(404).json({ Error: 'Email not found'});
})
});

sap.m.TileContainer Only Displays 2 Tiles

I'd like to use sap.m.TileContainer to display tiles with some info. The SAP sample is not really useful as it does not follow the guidelines such as using manifest.json etc...
So I built an app in SAP Web IDE from scratch. I am using TileContainer to display tiles. Its tile aggregation is bound to a local JSON data file.
The data file contains an array with three items. However, only two are displayed after rendering. Any suggestions why?
This is my data.json:
{
"TileCollection": [{
"title": "Slovenská Republika",
"info": "support for SR",
"flag": "",
"icon": "sap-icon://inbox"
}, {
"title": "Deutschland",
"info": "support for DE",
"flag": "",
"icon": "sap-icon://inbox"
}, {
"title": "Ceska Republika",
"info": "support for CZ",
"flag": "",
"icon": "sap-icon://inbox"
}]
}
This is my XML view:
<mvc:View
controllerName="com.support_page.controller.App"
height="100%"
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns:tnt="sap.tnt"
xmlns="sap.m">
<Page
showHeader="true"
enableScrolling="false">
<TileContainer
id="container"
tileDelete="handleTileDelete"
tiles="{/TileCollection}">
<StandardTile
icon="{icon}"
title="{title}"
info="{info}"
activeIcon="{flag}"/>
</TileContainer>
</Page>
</mvc:View>
many thanks for your suggestion
in the meantime i solved it with tile container as well.
what i did is that i used NOT a default model.
i initialised the model in component.js
then used model>/TileCollection and it worked though i am still a bit confused.
nevertheless, thanks for you answer as well.
I solved this issue , even i was facing same issue , If you dont use local model you will not face issue or if you define your model in controller you will not face the issue.
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
], function(Controller,JSONModel) {
"use strict";
return Controller.extend("SmartPurchaseReq.controller.Home", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* #memberOf SmartPurchaseReq.view.Home
*/
onInit: function() {
var that = this;
var data = {
"TileCollection" : [
{
"icon" : "sap-icon://hint",
"type" : "Monitor",
"title" : "Tiles: a modern UI design pattern for overview & navigation."
},
{
"icon" : "sap-icon://inbox",
"number" : "89",
"title" : "Approve Leave Requests",
"info" : "Overdue",
"infoState" : "Error"
},
{
"type" : "Create",
"title" : "Create Leave Requests",
"info" : "28 Days Left",
"infoState" : "Success"
},
{
"icon" : "sap-icon://travel-expense-report",
"number" : "281",
"numberUnit" : "euro",
"title" : "Travel Reimbursement",
"info" : "1 day ago"
},
{
"icon" : "sap-icon://loan",
"number" : "2380",
"numberUnit" : "euro",
"title" : "My Salary",
"info" : "8 days ago"
},
{
"icon" : "sap-icon:`enter code here`//lab",
"number" : "1",
"numberUnit" : "Invention",
"title" : "Test Lab Reports",
"info" : "8 Days Ago"
},
{
"icon" : "sap-icon://inbox",
"type" : "Monitor",
"title" : "Leave Request History"
},
{
"type" : "Create",
"title" : "Create Purchase Order",
"info" : "890€ Open Budget",
"infoState" : "Success"
},
{
"icon" : "sap-icon://stethoscope",
"number" : "3",
"title" : "Yearly Health Check",
"info" : "3 year overdue",
"infoState" : "Error"
},
{
"icon" : "sap-icon://meal",
"type" : "Monitor",
"title" : "Meal Schedule"
}
]
};
var DummyModel = new JSONModel();
DummyModel.setData(data);
// var sPath = jQuery.sap.getModulePath("model", "/Dummy.json");
// var DummyModel = new JSONModel(sPath);
that.getView().byId("container").setModel(DummyModel);
},
OnTilePress: function(evt) {
var idj = evt.getSource();
var d =5;
}
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* #memberOf SmartPurchaseReq.view.Home
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* #memberOf SmartPurchaseReq.view.Home
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* #memberOf SmartPurchaseReq.view.Home
*/
// onExit: function() {
//
// }
});
});

Sapui5- Page not displayed

I am trying to build a simple Hello World App in OpenUI5 using the proper MVC structure. I am using sap.m.App and not SplitApp.
So my App.view.js looks like this :
....
createContent : function(oController) {
this.setDisplayBlock(true);
this.app = new sap.m.App("targetAppId", {
});
return this.app;
}
....
In my component, for routing I am wrote the following code :
routing : {
config : {
viewType : "XML",
viewPath : "./view",
targetControl : "targetAppId",
clearTarget : false,
transition : "slide"
},
routes : [{
pattern : "",
viewType : "XML",
name : "splash",
view : "splash",
viewPath : "./view",
viewLevel : 0,
}
]
}
}
Both my App.view.js and splash.view.xml is in ./view .
In my component.js I wrote the following code to load the view :
createContent : function() {
var oView = sap.ui.view({
id : "app",
viewName : "./view.App",
type : "JS",
viewData : {
component : this
}
});
return oView;
}
splash.view.xml -
<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" >
<Page
showHeader="true">
<content>
<Text text="Hello"/>
</content>
</Page>
</mvc:View>
On execution I get a blank blue color screen. For some reason it is not navigating to splash.view.xml. I have no idea why. Please help.
EDIT :
If I change the sap.m.App to sap.m.SplitApp and add targetAggregation : "masterPages". Everything works
UPDATE :
What I did is changing the targetAggregation : "pages" . And everything works fine. Writing this here, in case it helps somebody.
Using targetAggregation : "pages", everything works fine.

Post object from backbone to REST

I am trying to post data from front-end to RESTful. I'm a backbone beginner, so my problems are probably easy to solve. But have struggled with this all day - so now I'm asking for guidance.
I have a button that use to add data to REST. So in my view I use object.save(); to save an object to model.
Here is my model:
define(["underscore" , "backbone"],function(_ , Backbone){
var Test = Backbone.Model.extend({
url:'http://mysite.com/Test/Test.svc/AddTest',
idAttribute: 'ID'
});
return Test;
});
View :
define(["jquery" ,
"underscore" ,
"backbone" ,
'models/Test',
'views/Test',
],function($ , _ , Backbone , Test, TestView){
var HomeView = Backbone.View.extend({
initialize: function() {
//....
},
events : {
"click #byn" : function(){
//....
},
'click #test' : 'addTest'
},
addTest : function(){
var object = new Test();
object.set({
"ID" : 0,
"Name" : "",
"CustomerID" : 106,
"Type" : 0,
"LastUpdated" : "\/Date(1383152400000+0700)\/",
"Detail" : [
{
"ID" : 0,
"TID" : 0,
"ItemID" : 22776,
"Quantity" : 2,
"LastUpdated" : "\/Date(1383152400000+0700)\/"
}
]
});
object.save();
var _wlView = new TestView({model:object});
},
render : function(){
//....
}
});
return HomeView;
});
To be truth, I really don't know how could I post the object that I have saved in my view object.save(); to the restful throw the rest url like http://mysite.com/Test/Test.svc/AddTest.
Url of model should be declared as urlRoot value and it is better to have it relative (e.g. "/AddTest").
Then the backend route for save action will be "actual url" + "urlRoot".

jstree - Cannot set icons when using types plugin

I'm trying to display a jstree containing sections and the pages that they contain.
I've set up a type for each but I can't get the icon to change for the page type, it just keeps displaying the default folder icon.
This is my javascript:
$('#demo1').jstree({
"themes" : {
"theme" : "default",
"dots" : false,
"icons" : true
},
"types" : {
"section" : {
"max_children" : -1,
"max_depth" : -1,
"valid_children": "all",
"type_attr" : "section"
},
"page" : {
"max_children" : 0,
"max_depth" : -1,
"valid_children": "none",
"icon" : {
"image" : "http://static.jstree.com/v.1.0rc/_docs/_drive.png"
},
"type_attr" : "page"
}
},
"core" : {"html_titles" : true, "load_open" : true },
"plugins" : [ "themes", "json_data", "ui", "cookies", "crrm", "sort", "types" ],
"json_data" : {
"ajax" : {
"type": 'GET',
"url" : function (node) {
var url = ""
if (node == -1)
{
url = 'localhost/sections';
}
else
{
url = 'localhost/sections/'+node.attr("id");
}
return url;
},
"type" : "get",
"success" : function(items) {
data = []
for (i in items) {
var item = items[i]
var type;
if (JSON.stringify(items[i].root)) {
type = "section";
node = {
"data" : item.title,
"attr" : { "id" : item.id, "rel" : type },
"state" : "closed"
}
} else {
type = "page";
node = {
"data" : item.title,
"attr" : { "rel" : type },
"state" : "open"
}
}
this.set_type(type, node);
data.push(node);
}
return data;
}
}
}
});
This is the HTML generated by the AJAX call.
<div id="demo1" class="demo jstree jstree-0 jstree-focused jstree-default" style="height:100px;">
<ul class="jstree-no-dots">
<li id="1" rel="section" class="jstree-open">
<ins class="jstree-icon"> </ins><ins class="jstree-icon"> </ins>One
<ul>
<li id="3" rel="section" class="jstree-closed"><ins class="jstree-icon"> </ins><ins class="jstree-icon"> </ins>One Subsection</li>
<li rel="page" class="jstree-open jstree-last"><ins class="jstree-icon"> </ins><ins class="jstree-icon"> </ins>Page in section one</li>
</ul>
</li>
<li id="2" rel="section" class="jstree-closed jstree-last"><ins class="jstree-icon"> </ins><ins class="jstree-icon"> </ins>Two</li>
</ul>
</div>
Can anyone see what's going wrong?
Any advice appreciated.
Thanks
Not sure if this answer is still useful but I've been having similar problems with jsTree and I found your question
Aare you sure this config is right? You have:
"types" : {
"section" : {
"max_children" : -1,
"max_depth" : -1,
"valid_children": "all",
"type_attr" : "section"
},
"page" : {
"max_children" : 0,
"max_depth" : -1,
"valid_children": "none",
"icon" : {
"image" : "http://static.jstree.com/v.1.0rc/_docs/_drive.png"
},
"type_attr" : "page"
}
I think it should be
"types" : {
"type_attr" : "rel", // you can remove this. the rel attribute is the default
"types" : {
"section" : {
"max_children" : -1,
"max_depth" : -1,
"valid_children": "all"
},
"page" : {
"max_children" : 0,
"max_depth" : -1,
"valid_children": "none",
"icon" : {
"image" : "http://static.jstree.com/v.1.0rc/_docs/_drive.png"
}
}
}
Notice that the Types object contains some properties (the type_attr option) and it also contains a nested Types property which includes each type.
Based on the docs I've read, the jsTree lib looks in the type_attr and gets the node's value and compares it to the list of values in Types.Types
for those here using 3.0, its different now.
from this issue: https://github.com/vakata/jstree/issues/497
The type is not read off of the rel attribute. Try using <li data-jstree='{ "type" : "floor" }'... in your markup (and keep the single quotes outside, and the double quotes - inside for the data-jstree attribute).`
so the key is
<li data-jstree='{ "type" : "section" }'>...</li>