I'm using FancyTree for the first time, and I would like define some custom node data, specifically an attribute named "content" in the HTML data used to create the tree:
<li id="xxxx" data-content="true" class="folder">
I have an init event-handler written in JavaScript and I want to access my custom data attribute there:
init: function(event, data, flag)
{
var tree = $("#tree").fancytree("getTree");
node = tree.getNodeByKey(key);
var data = node.data;
In an online tutorial, I saw that my custom attribute would be accessible as node.data.content, but I'm unable to display my custom attribute in an alert box to demonstrate that it was actually defined. How do I access my custom data attribute in my JavaScript function?
Sheldon
Ok, so i finally got it working. Your were close to getting your result.
The key variable is a string which represent the 'id' attribute of each LI element in your tree. You will obtain the node with that key. Once the node is obtained, you can retrieve your custom data attribute associated to that node. Since our 'data' variable is an object, containing key/value, you need to call it's 'key' name on the data object to retrieve the value, like so 'data.content'.
JS
$(function () {
// using default options
//Caching DOM element
var $myTree = $("#tree").fancytree();
// Get the DynaTree object instance
var tree = $myTree.fancytree("getTree");
//Set my key
var key = "id1";
//Get the node
var node = tree.getNodeByKey(key);
//Get the custom data attribute associated to that node
var data = node.data;
//data is an object so, data.content will give you the value of the attribute
alert(data.content);
});
JSFIDDLE
Hope this helps!
Related
The flowfile uses evaluateJsonPath in order to extract values and setup my Attributes. I need to pass some of the attributes into a JavaScript function which I have in a ExecuteScript processor. The setting is for ECMAScript and the JS code is in the Script Body.
So, as an example if my attributes are A, B, C and my function is foo(arg){}
How do I call the function foo(A)?
I have tried putting at the end of the Script Body, after the declaration of my function foo
foo(A);
foo(${A});
But this keeps failing and I am not able to find any examples on how to pass in the value to the function call. I get either a "A is not defined in " or Expects a , and got a {.
What is the proper way to pass an Attribute to the ExecuteScript processor?
UPDATED: SEE BELOW
So as I'm trying to figure this out here is what I'm dealing with.
Read in a JSON file
Set some attributes with EvaluateJSONPath
HERE I NEED TO merge some attributes and want to use the ExecuteScript to run some JavaScript
JAVASCRIPT
var flowFile = session.get();
if(flowFile){
var argFoo = flowFile.getAttribute("someAttribute");
// Set the value as a new Attribute in the flowFile
session.putAttribute(flowFile, "NewAttribute", argFoo);
}
I've also tried things like
var flowFile = session.get();
if(flowFile){
var argFoo = flowFile.getAttribute("someAttribute");
// Create a new flowFile
var newFlowFile = session.create(flowFile);
// Set the value as a new Attribute in the flowFile
session.putAttribute(newFlowFile, "NewAttribute", argFoo);
}
I'm blindly guessing how to get this to work.
Can someone point me in the right direction here on how to use JavaScript within this ExecuteScript processor?
The latest error is "This FlowFile was not created in this session and was not transferred to any Relationship via ProcessSession.transfer()"
Check these sites:
https://nifi.apache.org/docs/nifi-docs/components/org.apache.nifi/nifi-scripting-nar/1.20.0/org.apache.nifi.processors.script.ExecuteScript/additionalDetails.html
https://community.cloudera.com/t5/Community-Articles/ExecuteScript-Cookbook-part-1/ta-p/248922
https://community.cloudera.com/t5/Community-Articles/ExecuteScript-Cookbook-part-2/ta-p/249018
https://community.cloudera.com/t5/Community-Articles/ExecuteScript-Cookbook-part-3/ta-p/249148
https://github.com/mkalika/nifi-executescript-samples
You don't have to create new a FlowFile, if you want only to add a new attribute.
Example
flowFile = session.get();
if (flowFile != null) {
// Get attributes
var greeting = flowFile.getAttribute("greeting");
var message = greeting + ", Script!";
// Set single attribute
flowFile = session.putAttribute(flowFile, "message", message);
// Set multiple attributes
flowFile = session.putAllAttributes(flowFile, {
"attribute.one": "true",
"attribute.two": "2"
});
session.transfer(flowFile, REL_SUCCESS)
}
For this project, I want to change the logic written in jquery with that in js vanilla.
My code looks like this
Based on the information from the input using the event keydown,
I call a function through which I do a search in api.
var selectedUsers = [] //empty array
$('#userSearchTextbox').keydown((event)=>{
var textBox = $(event.target);
var value = textBox.val();
//Function which search in api
searchUsers(value);
});
//Search in array function
function searchUsers(searchTerm){
$.get("/api/users",{search:searchTerm},results =>{
outputSelectableUsers(results,$('.resultsContainer'));
});
}
After I call another function outputSelectableUsers
which will call 2 functions one that displays the data in HTML and one that creates an array of values.
function outputSelectableUsers(results,container){
results.forEach(results => {
//Call function which will render the html
var html =createUserHtml(results,false);
/*
Here is the problem, as seen using jquery element variable selects html variable which render function
*/
var element = $(html);
/*
with jquery, I managed to select the variable and assign it a click event that when I click it calls the function that adapts the array with data
from each API call
*/
element.click(()=>userSelected(results))
//append content to the html selector
container.append(element);
});
}
//Function which will update the array
function userSelected(user){
selectedUsers.push(user);
}
This is what the visible result looks like
And when I click on one of the cards, the area adapts to the user's values.
values that I take from the array and enter them in the database.
I managed to convert everything to js using fetch instead of ajax jquery and changed the selectors and events with vanilla js code.
But the problem is I couldn't find a way to change this piece of code.
var html =createUserHtml(results,false);
var element = $(html);
console.log(element)
element.click(()=>userSelected(results))
container.append(element);
at consol.log (element) I observed asata in the console.
The question is could I choose the element with js vanilla and get the same result as in the jquery version. To use Js Vanilla code instead of
var element = $(html);
element.click(()=>userSelected(results))
let users_id = results._id;
let html = createUserHtml(results,users_id ,false);
container.insertAdjacentHTML('beforeend',html);
//Identify each element by a unique selector
document.querySelector(`[data-selectorTab ="${results._id}"]`).addEventListener('click',()=>{
userSelected(res)
})
I solve this by adding a data attribute to dinamically generated elements,using this data atribute I can make a individual selector for each user.
What is the javascript code to get the active list which is being shown in a subgrid if the subgrid is designed to show more than one list in the Additional options with the view selector.
What I am trying to achieve is regarding to the list that has been selected in the subgrid I want to assign a new fetchXML value in Javascript.
var grid = parent.document.getElementById("mySubGrid");
// my subgrid has more than one list so I need to get the active list
// if (activeList=="all_elements") {fetchxml=activeListXML} else
// {fetchxml=anotherXML}
grid.control.SetParameter("fetchXML", fetchXml);
Thanks in advance for your help
I noticed that you are trying to use getElementById; this is not supported for client-side JavaScript. Instead there is a custom API that you should use
You can get a Grid Control's current view using the following
// Remember when configuring this webresource to enable passing Execution Context
function myCustomGridAction(executionContext)
{
// Use executionContext to retrieve FormContext
var formContext = executionContext.getFormContext();
// use the formContext to access the particular Grid
var gridContext = formContext.getControl("myGridId");
// use the gridContext to get the current View
var viewSelector = gridContext.getViewSelector();
// use the viewSelector to get the current view
var view = viewSelector.getCurrentView();
// view contains the following properties
// the View's object type code (Saved Query = 1039) or (User Query (4230)
console.log(view.entityType);
// the ID of the view
console.log(view.id);
// the Name of the view
console.log(view.name)
}
More information is here
NOTE: If the subgrid control is not configured to display the view selector, calling this method on the viewSelector object will throw an error.
If you want the XML that the view is using the approach is slightly different
// Remember when configuring this webresource to enable passing Execution Context
function myCustomGridAction(executionContext)
{
// Use executionContext to retrieve FormContext
var formContext = executionContext.getFormContext();
// use the formContext to access the particular Grid
var gridContext = formContext.getControl("myGridId");
// get the XML used to query records displayed in Grid
var xml = gridContext.getFetchXml();
}
My firebase db structure is given below,
users
fb-user-key1
user1-details1
Tags
Tag-key1
"name":"value"
Tag-key2
"name":"value"
fb-user-key2
user1-details2
Tags
Tag-key1
"name":"value"
Tag-Key1 & user-key's are generated by firebase with push(). firebase code to access the content is,
var fbref = firebase.database().ref("users");
fbref.child("Tags").on("child_added", function(e){
var Tagobj = e.val().name;
console.log(Tagobj);
});
This one is not returning anything. I am not able to access name:value pair in the above data structure.
`
adding modified code,
firebase.database().ref("users").on("child_added",function(e) { var Tagobj = e.val().Tags; });
Output of the above code is output data structure
How to access that name value pairs?? firebase keys are issue?
Not getting, where I am wrong. Appreciate your inputs.
Since Tags is a child property of each user, then you have to read it off of each user object.
If you want all Tags for all users, assuming Tags for each user is not updated after a user is created, you can do this:
tagsPerUserId = {};
firebase.datatabs().ref('users').on('child_added', function(snap) {
tagsPerUserId[snap.key] = snap.value().Tags;
// TODO: Notify view that tagerPerUserId is updated and needs to be re-rendered
console.log(`Tags for userId ${snap.key}: ${snap.value().Tags}`);
});
This way you will also get Tags of new users when they are created, but you will not get updates to Tags of existing users.
Reading the firebase doc this line:
database.ref('/').once('value').then(function(snapshot)
That is from a paragraph titled "Read data once" which I'm assuming reads in all the data from the database.
I'm just struggling to figure out how to assign data from the object that is returned to a variable in javascript.
What I want to do is populate a dropdown list with place names.
For instance if I have a field called Location in the db containing place names eg Sydney, Melbourne, Brisbane how would I get the data from the returned object and assign it a variable called place so I can then use the place variable to populate the html dropdown list.
You can try with this simple code -
database.ref('/').once('value').then(function(snapshot){
var list = snapshot.val();
if(list)
{
for (item in list)
{
itemIndex = item;
item = list[item];
//access your properties of the object say - item.location
}
}
});
You have to user 'child_added'
example:
var dbRef = firebase.database().ref().child('someChild');
dbRef.on('child_added', function(snap){
var res = snap.val().theValueYouNeed;
});
The code above gets the specific child in your db like this:
someChild:{
theValueYouNeed:"some value"
}
Then you can populate your list with the values.
I hope this helps!