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
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'});
})
});
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() {
//
// }
});
});
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.
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".
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>