I currently have a jstree in which I get the selection elements with the code:
var selectedElmsIds = [];
var selectedElms = $('#PermisosjsTree').jstree("get_selected", true);
$.each(selectedElms, function () {
selectedElmsIds.push(this.id);
console.log(this.id);
});
but I need to obtain the overlaid elements (marked with red below), how do I get them?
The 'parents' property of the node should give you the parent and its ancestors.
$.each(selectedElms, function () {
selectedElmsIds.push(this.id);
console.log(this.id);
console.log(this.parents);
});
Related
div.tabs is a container of tab control. div.tab is an individual tab, child of div.tabs. div.tab.active is the tab currently showing.
.data is a whatever element. It can appear in any div.tab, or just appear in body when these is no .tab.
Task:
If there is a .tabs, select .data that are child of .tab.active.
If there is no .tabs, select all .data.
I wrote the following two version:
// First version
var data;
if ($('.tabs').length) {
data = $('.tab.active .data');
} else {
data = $('.data');
}
// Section version
var data = $('*');
if ($('.tabs').length) {
data = data.find('.tab.active');
}
data = data.find('.data');
But I wonder if there is a function s.findUsingParent(e) which selects elements that are children of e from a set of elements s:
// Expect
var data = $('data');
if ($('.tabs').length) {
data = data.findUsingParent('.tab.active');
}
Is there in jQuery?
Is there a pure css solution?
You can use .filter() function to filter the element that have parent as .tab.active:
var data = $('data');
if ($('.tabs').length) {
data = data.filter(function(){
return $(this).closest('.tab.active').length !=0;
});
}
I am unable to retrieve the content of the first cell. I'm trying it like this:
console.log($(this).closest("tr").find('td:first').innerHTML);
//or...
console.log($('td:first', $(this).parents('tr')).text());
Code:
$('.editable').click(function () {
var text = $(this).text();
if (typeof $(this).find("textarea")[0]=="undefined")//checking if we have a textarea already
{
$(this).text('');
$('<textarea />').appendTo($(this)).val(text).select().blur(function () {
var newText = $(this).val();
$(this).parent().text(newText).find('textarea').remove();
console.log($(this).closest("tr").find('td:first').innerHTML);
});
}
});
JSfiddle: http://jsfiddle.net/KjknL/
I think the problem has to do with the textarea being added dynamically. But I cannot move from it. If I use .prev() or .next(), it returns empty. Any ideas?
try this: http://jsfiddle.net/KjknL/2/
the textarea doesn't exist anymore because you removed it just before trying to reach the first td from it.
console.log($(this).closest("tr").find('td:first').html());
$(this).parent().text(newText).find('textarea').remove();
I have created a little div .form_single_input_field which contains multiple .form_single_input_fields, whose respective text I would like to log. However, the alert will output all values concatenated together, while I would like to have an array of values. How do I achieve that ?
$(".form_single_input_field").keyup(function () {
var actualTarget = $(this).parent();
alert(actualTarget.find('.form_single_selection_option').text());
});
I know that there is the .each() function, but this:
$(".form_single_input_field").keyup(function () {
var actualTarget = $(this).parent();
$('.form_single_selection_option').each(function(){
alert($(this).text());
});
});
would alert all values from ALL .form_single_selection_options in my document, whereas I would like to have only the children and children's children of the selected/current field.
Change your code to:
$(".form_single_input_field").keyup(function () {
var actualTarget = $(this).parent();
$('.form_single_selection_option', actualTarget).each(function(){
alert($(this).text());
});
});
I recently encountered an issue dealing with the Telerik Treeview component and handling recursive selection with checkboxes when handling larger data sets (500-1000+ nodes).
With smaller data sets (100-300 nodes) the Treeview and its selection methods work as follows (as they should):
Initially - all nodes are selected.
Clicking a parent node toggles selection of all of the child nodes.
Unselecting a single child node will unselect the parent (and any grandparent / top-level nodes)
Most of these things I believe are fairly commonplace when dealing with Treeviews and selection. The current method that is being used isn't the cleanest and calls an unnecessary amount of additional events to be fired during the selection process.
I was just curious if anyone had handled an issue similar to this before I began tearing apart the current code (available below).
Existing Selection Code:
$('#TreeView').find("li").find('> div > .t-checkbox :checkbox').bind('click', function (e) {
var isChecked = $(e.target).is(':checked');
var treeView = $($(e.target).closest('.t-treeview')).data('tTreeView');
var item = $(e.target).closest('.t-item');
var checkboxes = item.find('.t-checkbox :checkbox');
$.each(checkboxes, function (index, checkbox) { $(checkbox).attr('checked', isChecked ? true : false); treeView.checkboxClick(e, checkbox); });
var siblings = item.parent().find('> li .t-checkbox');
var siblingsLength = siblings.length;
var checkedLength = siblings.find(':checked').length;
if (siblingsLength == checkedLength) {
var parentCheckBox = item.parent().closest('.t-item').find('> div .t-checkbox :checkbox');
var grandparentCheckBox = item.parent().parent().parent().closest('.t-item').find('> div .t-checkbox :checkbox');
parentCheckBox.attr('checked', true)
grandparentCheckBox.attr('checked', true)
treeView.checkboxClick(e, parentCheckBox)
treeView.checkboxClick(e, grandparentCheckBox)
}
else {
var parentCheckBox = item.parent().closest('.t-item').find('> div .t-checkbox :checkbox');
var grandparentCheckBox = item.parent().parent().parent().closest('.t-item').find('> div .t-checkbox :checkbox');
parentCheckBox.attr('checked', false)
grandparentCheckBox.attr('checked', false)
treeView.checkboxClick(e, parentCheckBox)
treeView.checkboxClick(e, grandparentCheckBox)
}
});
I found a solution that I feel will function at least effectively as of right now and works a great deal faster than the existing solution, even when dealing with very large data sets.
I created a simple function that fires upon the Checked event within the TreeView and handles all the necessary child selection:
function TreeView_Checked(e) {
var current = $(e.item).find(':checkbox:eq(0)');
//Check or uncheck all child nodes from this one
var children = $(e.item).find(':checkbox');
current.is(':checked') ? children.attr('checked', 'checked') : children.removeAttr('checked');
}
which is implemented by adding the following within the TreeView declaration:
TreeView().Name("TreeView").ClientEvents(e => e.OnChecked("TreeView_Checked"))
This code will select or deselect the parent along with all of its children. If you want the grand-parent, you can probably do .closest(".t-item")
$(document).ready(function () {
$("#btnSelectChildren").click(function () {
nodeCheck(true);
});
$("#btnDeselectChildren").click(function () {
nodeCheck(false);
});
});
function nodeCheck(isChecked) {
var treeView = $('#TreeView').data('tTreeView');
var selected = $('#TreeView .t-state-selected');
treeView.nodeCheck(selected, isChecked);
selected.closest('li').find(".t-item").each(function () {
treeView.nodeCheck($(this), isChecked);
});
}
I am trying to create a Jquery Tree plugin for my current project. In the plugin, there are 3 compomnents: a text box containing the result selected from the tree , a div containing the tree and a button to show the div. It works fine, except that i cannot make it auto lose the popup div if the tree lose its focus.
Here is the code to create the div
createTree = function() {
$.getJSON(_options.jsonSrc, function(data) {
nDiv = document.createElement("div");
nDiv.id = "divRootAd";
$(nDiv).css('display', 'none');
jsonObj = data["treeJson"];
nUl = document.createElement("ul");
nUl.appendChild(createNode(jsonObj));
nDiv.appendChild(nUl);
$("body").append(nDiv);
//$(nDiv).focus();
repositionDiv();
});
};
repositionDiv = function() {
if ($('#divRootAd').is(':hidden')) {
// get the field position
var sf_pos = $("#txtAdVal").offset();
var sf_top = sf_pos.top;
var sf_left = sf_pos.left;
// get the field size
var sf_height = $("#txtAdVal").height();
// apply the css styles - optimized for Firefox
$("#divRootAd").css("position","absolute");
$("#divRootAd").css("left", sf_left);
$("#divRootAd").css("top", sf_top + sf_height + 5);
$('#divRootAd').show();
$('#divRootAd').blur(function(event){
alert("lose focus");
clearDiv();
});
} else {
clearDiv();
}
};
The line alert("lose focus") does not work when i move the mouse outside the div. Can anyone suggest a solution for this ?
Instead of blur you could use mouseout
$('#divRootAd').mouseout(function(event){
alert("lose focus");
clearDiv();
});
Hope it helps