I have no trouble getting the jsTree to implement on the page.
I tried SO MANY different things from so many suggestions on various sites.
$('#myTree').jstree({
....
})
.on('loaded.jstree', function (e, dta) {
var t = $('#myTree').jstree(true);
var n = t.get_node("myIDstring");
console.log(t);
console.log(n);
});
My last attempt before this post was to try using the .on(loaded.jstree) callback as shown above. But it didn't make any difference from where I tried to get the node. Always the same result.
console.log(t) proves I have a tree. In this case I see I have a cnt of children = 217.
"myIDstring" is cut-and-pasted from the id attribute of one of the nodes I drilled down on in the javascript console of the console.log(t) echo.
console.log(n); only echos 'false'.
If I try t.find() I get find() is not a function error in the console.
van n = $('#myTree').jstree(true).get_node("myIDstring");
fails just the same as var n = t.get_node();
Thanks.
PS: Yes. I know I could just as well us the value of dta. But my goal is to not use this code from inside the .no('loaded.jstree')
The loaded.jstree is fired when you just have the root node loaded. Better use ready.jstree event like below. Also check demo - Fiddle Demo
$('#myTree')
.jstree({
...
})
.on('ready.jstree', function(){
var t = $('#myTree').jstree(true);
var n = t.get_node("myIDstring");
console.log(t);
console.log(n);
}
Related
I've read lots of stackoverflow questions with no luck. My problem is, I have an HTML page in which I have
<select id="myid"></select>
and there, there's a Firebase command that retrieves names of values i need, and put it inside the <option> like HERE:
reference.on("child_added", function (childSnapshot){
var key = childSnapshot.key;
var opt = document.createElement('option');
opt.textContent = key;
document.getElementById('myid').appendChild(opt);
});
Now, i need to somehow access these values, that by the way are correctly appearing in both HTML and my site, however:
var val = document.getElementById('myid').value;
console.log(val);
It always returns blank in console. I don't know how else can I access it. Whenever I type those values in <option> by myself in HTML, everything works as it should and console returns the names that are in database.
#edit: as far as i tried to crack it, it seems to do with the fact that javascript cannot access elements, that for javascript itself aren't yet loaded, but i tried doing window.onload and other similar ones and they don't help.
You can use AngularJS, with directive $scope.watch, i will write a simple example of how to use and the link of documentation, if you have any question talk back to me!
function MyController($scope) {
$scope.myVar = 1;
$scope.$watch('myVar', function() {
alert('hey, myVar has changed!');
});
$scope.buttonClicked = function() {
$scope.myVar = 2; // This will trigger $watch expression to kick in
};
}
AngularJS Documentation
I hope help with this :)
I have a piece of code show below that creates a Mongo collection as show below. However whenever I try to access the collection from inside of the Meteor.isClient scope I get an error. Please can anyone spot my mistake.
ImagesCollection = new Mongo.Collection("Images");
Images = new Mongo.Collection("Images");
if(Meteor.isClient){
Template.body.helpers({ images :
function() {
console.log("Template Loade");
return Images.find({},{sort: -1 });
}
}) ;
Template.Images.events({
'click .js-image' : function(event){
$(event.target).css("Width", "50px");
} ,
'click .js-del-image' : function(event){
var image_id = this._id ;
$("#"+image_id).hide({slow });
Images.remove({"_id" : image_id});
},
'click .js-rate-image' : function(event){
var rating = $(event.currentTarget).data("userrating");
var image_id = this.id ;
Images.find({"_id": image_id});
}
});
}
The content of my Startup.js is as below as well
if(Meteor.isServer){
Meteor.startup(function(){
for(var i = 0 ; i<=23 ; i++)
{
Images.insert({
'img_src' : 'img_'+i+'.jpg' ,
'img_alt' : 'Image number' + i
});
console.log(Images.find().count);
}
});
}
consle.log("Template Loade");
Since you don't specify your error, the line above will raise an error.
From the code that you have provided, there are two problems that I can see.
First, in your images template helper, your second parameter for the Images.find() function call is incorrect. You are missing a document field specification for the sort operation. This second parameter needs to be in the format {sort: {'document_field': -1}}. Although you have not provided the error text that you are seeing, I suspect the error has something to do with Mongo not being able to process the query, and this would be the reason for that.
Second, although this is less severe and should not be causing the problems with your inability to access the Images collection on the client, in your console.log() statement in your server Meteor.startup() code you are accessing count as if it is a property on the cursor returned from the Images.find() function call. In actuality, it is a function and should be called like so: Images.find().count().
Also, as an aside, I would suggest that you give different names to your two collections that you have defined. Giving them both the same name may cause issues for you if you are trying to manipulate data through the Mongo shell.
I am not sure if this is an issue, but why are you initializing twice the "images" collection ?
ImagesCollection = new Mongo.Collection("Images");
Images = new Mongo.Collection("Images");
And ImagesCollection is not used anywhere in you're code.
Try to remove one of this lines.
I would like to test a filtering function in my angularJS app.
In fact when I click on the filter the number of search results displayed on the page should decrease
Here is is my code so far :
element(by.id('foundNumber')).getText().then (function(text){console.log(text); })
element(by.repeater('term in facets.uproctype').row(0)).click ()
element(by.id('foundNumber')).getText().then (function(text){console.log(text); })
And here is my console log :
Using the selenium server at http://localhost:4444/wd/hub
6209
6195
....
I don't know how can I compare theses two values in an expect line as I can't use them inside their function.
Any help?
Thanks
Zied
I believe you would have to nest your then functions to ensure the original value is available.
element(by.id('foundNumber')).getText().then( function(original_text) {
element(by.repeater('term in facets.uproctype').row(0)).click ();
element(by.id('foundNumber')).getText().then( function(new_text){
expect(original_text).not.toBe(new_text);
});
});
This link also might be helpful.
https://code.google.com/p/selenium/wiki/WebDriverJs#Control_Flows
Another way is to schedule the comparison at the protractor control flow so it will be executed after all values are available.
var oldValue,newValue;
element(by.id('foundNumber')).getText().then(function(text){oldValue=text})
element(by.repeater('term in facets.uproctype').row(0)).click()
element(by.id('foundNumber')).getText().then(function(text){newValue=text})
protractor.promise.controlFlow()
.execute(function(){return protractor.promise.fulfilled()},'wait for control flow')
.then(function(){
expect(oldValue).not.toEqual(newValue);
});
There is a nice explanation of flow.execute() in this blog post.
I suspect you can just compare the results of .getText() from different points using expect
var text1 = element(by.id('foundNumber')).getText();
element(by.repeater('term in facets.uproctype').row(0)).click();
var text2 = element(by.id('foundNumber')).getText();
expect(text1).not.toBe(text2);
expect handles unwrapping of the promises passed to it and actually compares resolved values.
Is this code valid/correct
var items = $(".items"); // when would items be properly populated, at dom.ready()??
var itemsHrefs = []; // direct JS code
prepareItemsList(); **// direct JS code**
**// could be the case that items array is not populated yet ???**
function prepareItemsList() {
for ( var i = 0; i < items.length; i++ ) {
var plElement = items.eq(i);
itemsHrefs.push (plElement.attr('href'));
}
}
Questions:
When would items variable be properly created. I assume dom.ready()??
Should I put execution of prepareItemsList() inside a document.ready handler to be correct?
NOTE: When I tried doing 2. above, I ran into different issues
You need to put the code that works with the DOM in a $(document).ready() callback. If you try to work with the DOM before it's ready, your code will not work properly (or at all).
It's sometimes confusing to keep only a portion of the code in the callback, so I usually just wrap everything jQuery-related in it:
$(document).ready(function() {
var items_hrefs = $('.items').map(function() {
return this.href;
}).get();
});
In jsTree ,How to get Node information by node id ?
I know id of following node i.e 295 then how to get complete node information
<item id="295" parent_id="192" title="itemTitle" version="1">
<content><name>Bhushan Sambhus</name></content>
</item>
above xml part rendered into jsTree is as follows
$("#treeViewDiv").jstree({
"xml_data" : {
"data" : "" +
"<root>" +
"<item id="295" parent_id="192" title="itemTitle" version="1">"+
"<content><name>Bhushan Sambhus</name></content> "+
"</item>"
}
"plugins" : [ "themes", "xml_data","ui" ]
});
Something like following psudo code
function getNodeByNodeID(node_id){
// some code
// $.jstree.get_node ...... etc ?
//
return relatedNodeInformation;
}
var nodeInfo = getNodeByNodeID(providedNodeID) // psudo code
// any api in jstree to get nodeInfo by providedNodeID?
var parent_id_value = nodInfo.attr("parent_id");
var title_value = nodInfo.attr("title");
var version_value = nodInfo.attr("version");
var node_name = nodInfo.children("a").text()
alert(parent_id_value+" :: "+title_value+" :: "+version_value+" :: "+node_name);
Input : 295
Output: 192 :: node_name :: 1 :: node_name
Any help or guidance in this matter would be appreciated
If I'm understanding your question correctly, you can accomplish what you want to do like this:
var nodInfo = $("#" + providedNodeId);
var parent_id_value = nodInfo.attr("parent_id");
var title_value = nodInfo.attr("title");
var version_value = nodInfo.attr("version");
var node_name = nodInfo.children("a").text();
alert(parent_id_value+" :: "+title_value+" :: "+version_value+" :: "+node_name);
Just want to help keep the answer up-to-date. Using jstree 3.1.0, node objects (not DOM objects) are fetched by using this code:
var treeMain; // reference holder
$(document).ready( function () { // when the DOM is ready
treeMain = $('#treeMenus').jstree(); // create the tree and get the reference
});
function getNode( sNodeID)
{
return $.jstree.reference(treeMain).get_node(sNodeID); // use the tree reference to fetch a node
}
I've seen several answers to this question on StackOverflow that all talk about getting back to the DOM object of a tree item. I'm willing to bet that most people asking this question really want to get back to the underlying JSON data object of a tree item, which is why they say they want the node object (which has the .original property). Specifically, you need this for implementing things like "create" functionality where you need to create a new JSON data object with a ParentID that is set to the ID of the parent JSON data object. I searched for 2 days and didn't find anything clear in the jstree documentation that explained this:
$.jstree.reference(treeMain).get_node(sNodeID);
simple call. In their defense, they do have a 1 line example buried in here:
http://www.jstree.com/docs/interaction/
but it's an example most people won't care about (the user will be selecting nodes most of the time), and certainly not clear for what it is actually capable of doing. Anyways... hope this is helps save someone else a couple of days. =)