How to get checked nodes in jquery jstree - javascript

I have created one jquery jstree and it's working fine. Now the problem is how to get the the checked nodes details.
For Creating JStree The code is:
$(function () {
$("#tree").jstree({
"json_data" : {
"data" : [
{"data":"pe_opensourcescanning","id":0,"pId":-1,"children": [{"data":"tags","id":30,"pid":0},{"data":"branches","id":29,"pid":0},{"data":"trunk","id":1,"pid":0,"children":[{"data":"import-export","id":28,"pid":1},{"data":"custom_development","id":12,"pid":1},{"data":"Connectors","id":7,"pid":1},{"data":"support","id":6,"pid":1},{"data":"Installation-Configuration","id":5,"pid":1},{"data":"backup","id":2,"pid":1}]}]}
]
},
"plugins" : [ "themes", "json_data", "checkbox", "ui" ]
}).bind("select_node.jstree", function (e, data) { alert(data.rslt.obj.data("id")); });
Now while getting checked nodes i need all the attributes values for those checked elements. Say like for "tags" the json object looks like {"data":"tags","id":30,"pid":0}, so if user select tag i need the value of "data" And "id". i have tried to write some code but unfortunately that is not working.
Getting Checked Nodes.
$("#" +div2.childNodes[i].id).jstree("get_checked",null,true).each
(function () {
alert(this.data);
alert(this.id);
});
Kindly give me a solution.

As the Author of jstree (Ivan Bozhanov) points out on google-Groups Discussion regarding get_checked, it can also be achieved using the following:
$('#tree').jstree(true).get_selected();
This returns a List of the IDs, e.g. ["j1_2"] or ["j1_2", "j1_3", "j1_1"]
Check out the fiddle by Ivan Bozhanov himself on: jsfiddle-Example get_selected

function submitMe(){
var checked_ids = [];
$("#server_tree").jstree("get_checked",null,true).each
(function () {
checked_ids.push(this.id);
});
doStuff(checked_ids);
Go through this once
jstree google groups

$.each($("#jstree_demo_div").jstree("get_checked",true),function(){alert(this.id);});

$('#dvTreeStructure').on('changed.jstree', function (e, data) {
var i, j, r = [];
for (i = 0, j = data.selected.length; i < j; i++) {
r.push(data.instance.get_node(data.selected[i]).text.trim());
}
alert('Selected: ' + r.join(', '));
}

While using get_checked or get_selected pass the boolean as false to get the whole node where if you send as true, it will return only node Ids.
You have a look at https://www.jstree.com/api/#/?q=checkbox&f=get_checked([full])
You can also have a look at https://everyething.com/Example-of-jsTree-to-get-all-checked-nodes to get an idea of different kind of selected.

Related

jstree showing all nodes if search string didn't match any node

I'm rendering jstree with following config
$('#deliverables').jstree({
'core': {
'data': data
},
'search': {
'case_insensitive': true,
'show_only_matches' : true
},
'plugins': ['search']
});
$('#deliverable_search').keyup(function(){
$('#deliverables').jstree('search', $(this).val());
});
With this config, jstree showing only matched nodes if the search text has found atleast one node. But jstree showing all the nodes if the search text not matching with any node. I found this a bit strange. Am i missing something here?
https://jsfiddle.net/t9fe58rt/1/ link for your reference.
It's an intended bahavior, see: https://github.com/vakata/jstree/issues/1192#issuecomment-128042329
But you can attach an handler to the search event and if the result is empty act accordingly, eg. you can hide the all the tree nodes using hide_all method.
Code:
.on('search.jstree', function (nodes, str, res) {
if (str.nodes.length===0) {
$('#deliverables').jstree(true).hide_all();
}
})
But don't forget to show them all before trigger a new search:
$('#deliverable_search').keyup(function(){
$('#deliverables').jstree(true).show_all();
$('#deliverables').jstree('search', $(this).val());
});
Demo: https://jsfiddle.net/xfn8aa19/
For me, the answer of Irvin Dominin was not enough
$('#deliverable_search').keyup(function () {
$('#deliverables').jstree(true).show_all();
$('.jstree-node').show();
$('#deliverables').jstree('search', $(this).val());
$('.jstree-hidden').hide();
$('a.jstree-search').parent('li').find('.jstree-hidden').show();
});

Trying to make an event depend on another event and data is passed along using jquery custom events

for this problem I want to pass along data depending if a checkbox is checked. the data comes from the .on() second paramater.
I want to do something like this. I know it is really messed up. Im not sure how the data work and when to use .trigger()
$(document).on('justData', function(e, data){
console.log(data);
})
$('.justData').on('click', function(){
var insert
dataobj ={
"mike" : 'mikevalue',
"john" : 'johnValue'
}
$("#checkThis").on('change', function(e, data){
if(this.checked){
insert = dataobj.mike
}else{
insert = dataobj.john
}
})
$(this).trigger('justData', insert)
})
I wanted to insert "mikevalue" if the box is checked and "johnvalue" if unchecked.
I'm learning how to use mediators. I think that's when you do $emitter = $({}) so I want to separate event. when the user clicks on the $(.justData) i would have $({}).trigger("Ischecked") something like that I'm confused. If some one can show me how to pass along dynamic data to different events using $emitter .trigger() .on() that would be great.
You're on the right track. This is the simple and clear example given from the jQuery API Docs for handling custom events:
$( "#foo" ).on( "custom", function( event, param1, param2 ) {
alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );
Also cleaned up your code a little bit:
$('body').on('justData', function(e, data){
console.log(data);
});
$('.justData').on('click', function(e){
var insert = "",
$checkbox = $('#checkThis'),
data = {
"mike" : 'mikevalue',
"john" : 'johnValue'
};
if($checkbox.prop('checked')){
insert = data.mike;
} else {
insert = data.john;
}
$('body').trigger('justData', insert);
});

Refactoring Code

Let's say I have the following code:
$(function () {
$(".buy-it-now.ribbon").click(function () {
$(".bid-to-beat.ribbon.active").removeClass("active");
$(".bid-to-beat.ribbon").addClass("inactive");
$(".buy-it-now.ribbon.inactive").removeClass("inactive");
$(".buy-it-now.ribbon").addClass("active");
$(".bid-now").hide();
$(".buy-now").show();
$(".add-to-cart").hide();
})
$(".bid-to-beat.ribbon").click(function () {
$(".buy-it-now.ribbon.active").removeClass("active");
$(".buy-it-now.ribbon").addClass("inactive");
$(".bid-to-beat.ribbon").removeClass("inactive");
$(".bid-to-beat.ribbon").addClass("active");
$(".buy-now").hide();
$(".bid-now").show();
$(".add-to-cart").show();
});
});
It is a simple function that allows for multiple UI related things to happen on the front-end of a site I am working on. I am fairly (very) new to jQuery and JavaScript in general and am learning about refactoring and making my code more condensed now. The way I currently write code is sort of line per thought I have. So my question is how would an experienced developer write this same code? Or rather, how could I refactor this code?
Try the following:
$(function () {
var $handlers = $('.buy-it-now.ribbon, .bid-to-beat.ribbon');
$handlers.click(function() {
$handlers.toggleClass("active inactive");
var $elements = $(".bid-now, .add-to-cart"),
$buyElement = $(".buy-now");
if($(this).is('.buy-it-now.ribbon')) {
$elements.hide();
$buyElement.show();
} else {
$elements.show();
$buyElement.hide();
}
});
});
This question would be better suited for codereview, but yes it can be condensed a little using method chaining.
$(function () {
$(".buy-it-now.ribbon").click(function () {
$(".bid-to-beat.ribbon").removeClass("active").addClass("inactive");
$(".buy-it-now.ribbon").removeClass("inactive").addClass("active");
$(".bid-now").hide();
$(".buy-now").show();
$(".add-to-cart").hide();
})
$(".bid-to-beat.ribbon").click(function () {
$(".buy-it-now.ribbon").removeClass("active").addClass("inactive");
$(".bid-to-beat.ribbon").removeClass("inactive").addClass("active");
$(".buy-now").hide();
$(".bid-now").show();
$(".add-to-cart").show();
});
});
You could condense it further by pre selecting the elements and caching them in variables before the click events as long as no elements are added or removed during the life of the page.
As your code it is you can combine some of the selectors into a single line. And also because your elements looks to be static you can cache them into a variable and use them later as it reduces the number of times a element is looked up in the DOM reducing the accessing time..
Also you can limit the scope of these variables or selectors by encasing them in an object or a closure..
Maybe something in these lines..
$(function () {
cart.init();
});
var cart = {
elems : {
$buyRibbon : null,
$bidRibbon : null,
$bidNow: null,
$buyNow: null,
$addToCart: null
},
events : {
},
init : function() {
this.elems.$buyRibbon = $(".buy-it-now.ribbon");
this.elems.$bidRibbon = $(".bid-to-beat.ribbon");
this.elems.$bidNow = $(".bid-now") ;
this.elems.$buyNow = $(".buy-now") ;
this.elems.$addToCart = $(".add-to-cart") ;
this.events.buyClick();
this.events.bidClick();
}
};
cart.events.buyClick = function() {
cart.elems.$buyRibbon.on('click', function(){
cart.elems.$bidRibbon.removeClass('active').addClass('inactive');
cart.elems.$buyRibbon.removeClass('inactive').addClass('active');
cart.elems.$bidNow.hide();
cart.elems.$buyNow.show();
cart.elems.$addToCart.hide();
});
}
cart.events.bidClick = function() {
cart.elems.$bidRibbon.on('click', function(){
cart.elems.$buyRibbon.removeClass('active').addClass('inactive');
cart.elems.$bidRibbon.removeClass('inactive').addClass('active');
cart.elems.$bidNow.show();
cart.elems.$buyNow.hide();
cart.elems.$addToCart.show();
});
}
So basically in here your whole cart is a object ..And the cart has different properties which are related to this.. You follow the principles of object oriented programming here..
Using closures I heard gives you better design limiting the scope of your code..
Might I suggest something like this:
$(function () {
var buyNowButton = $('buy-it-now.ribbon'),
bidToBeatButton = $('.bid-to-beat.ribbon'),
buyNowEls = $('.buy-now'),
bidToBeatEls = $('.bid-now,.add-to-cart');
var toggleButtons = function(showBuyNow){
buyNowButton.toggleClass('active', showBuyNow);
bidToBeatButton.toggleClass('active', !showBuyNow);
buyNowEls.toggle(showBuyNow);
bidToBeatEls.toggle(!showBuyNow);
}
buyNowButton.click(function(){ toggleButtons(true) });
bidToBeatButton.click(function(){ toggleButtons(false) });
});
You could save a some lines by removing the selectors at the start and just do the selection in place, if the saved space would be more important than the minor performance hit. Then it would look like this:
$(function () {
var toggleButtons = function(showBuyNow){
$('buy-it-now.ribbon').toggleClass('active', showBuyNow);
$('.bid-to-beat.ribbon').toggleClass('active', !showBuyNow);
$('.buy-now').toggle(showBuyNow);
$('.bid-now,.add-to-cart').toggle(!showBuyNow);
}
$('buy-it-now.ribbon').click(function(){ toggleButtons(true) });
$('.bid-to-beat.ribbon').click(function(){ toggleButtons(false) });
});
The first version selects the elements once and holds them in memory; the second selects them each time the button is clicked. Both solve the problem I believe would occur with the selected answer where clicking the same button twice would cause the .active and .inactive classes to get out of sync with the shown/hidden elements.

jquery - rebind datatable

I use jquery ajax. I have created function: getDatalist ();
This function displays a table with data. I use this function on multiple places on your page. When you make a change in one table, I would like to see change in others. How to rebind all the tables? Is it a trick?
Thank you very much.
getDatalist: function(dataid)
{
$.post('ActionScripts/Load.php',{
}, function(data) {
$(dataid).html(data);
});
},
if you have all table ids or classes you can use each.
var ids = ["id1", "id2", "id3"]
getDatalist: function(dataid)
{
$.post('ActionScripts/Load.php',{
}, function(data) {
$.each(ids,function(index, value){
$("#"+value).html(data);
})
// or u can give same class name table then find and re insert them.
//for same class usage
//$(".commonTable").each(function(){
//$(this).html(data);
//})
});
}

Is it possible to search through json result with jQuery

What I'm trying to achieve, is to output a json list that contains a list of Css classes, and their corresponding url records, i.e.
var jsonList = [{
"CSSClass": "testclass1",
"VideoUrl": "/Movies/movie.flv"
}, {
"CSSClass": "testclass2",
"VideoUrl": "/Movies/movie2.flx"
}]; //]]>
foreach item in the list I am adding a click event to the class...
$.each(script, function() {
$("." + this.CSSClass, "#pageContainer").live('click', function(e) {
videoPlayer.playMovie(this);
return false;
});
});
What I'm wondering, is if I can somehow get the corresponding url from the jsonlist, without having to loop through them all again, searching for CSSClass, or adding the url to the link as an attribute?
you can add an Index and an Item parameter to the callback function in $.each method.
$.each(script, function(i, item) {
$("." + item.CSSClass, "#pageConainer").live("click", function() {
videoPlayer.playMovie(item.VideoUrl);
return false;
});
});
"i" will be a counter of each iteration within the json object
"item" will represent the object in use
Absolutely, you just need to capture the your object so that the click function's closure has access to the right thing when it fires. Something like this should work:
$.each(script, function() {
var vid = this;
$("." + vid.CSSClass, "#pageContainer").live('click', function(e) {
videoPlayer.playMovie(vid.VideoUrl);
return false;
});
});

Categories