Fetching selected checkboxes from jstree - javascript

I have a jstree with check boxes.
When I select a node and click on button then I am geting the name of that node.
But now I would like to allow multiple selection so that I have assigned check box to jstree each elements.
No how can I get the c=value of selected nodes.
Also I want to allow search in that but I don't know how to do it.
I have enabled ssearch plugin.
Here is my code
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<style>
html { margin:0; padding:0; font-size:62.5%; }
body { max-width:300px; min-width:100px; padding:20px 10px; font-size:14px; font-size:1.4em; }
h1 { font-size:1.8em; }
.demo { overflow:auto; border:1px solid silver; min-height:100px; }
</style>
<link rel="stylesheet" href="style.min.css" />
</head>
<body>
<div id="frmt" class="demo"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jstree.min.js"></script>
<button>>></button>
<script>
$('#html').jstree();
$('#frmt').jstree({
'core': {
'data':[{"id":"NODE 1","text":"node 1","children":[{"id","node 2","text":"node2"}]}]
},
"checkbox" : {
"whole_node" : false,
"keep_selected_style" : true,
"three_state" : true,
"tie_selection" : false
}, "search" : {
"fuzzy" : true
},"plugins" : [ "checkbox", "search", "state", "wholerow", "types", "selectopens" ]
});
$('#frmt').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
$('button').on('click', function () {
alert($('#frmt').jstree("get_selected"));
});
</script>
</body>
</html>

You can get it by
alert($('#frmt').jstree("get_checked"));

You can simply declare a array and loop over the checkboxes to identify which ones are checked and store it.
var checked_ids = [];
$("#frmt").jstree("get_checked",null,true).each
(function () {
checked_ids.push(this.id);
});

Related

How can i get specific element with 'document.querySelector' according to 'color' property?

I want to get the 'p' element with red color attribute. To do this i wrote the code below but i get a null result. What am i doing wrong?
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./test.css">
<script src="./test.js" defer></script>
<title>test</title>
</head>
<body>
<p id="p1">red</p>
<p id="p2">green</p>
<p id="p3">blue</p>
</body>
</html>
test.js
test.js
"use strict"
let element = document.querySelector("p[color='red']");
console.log(element); // logs null
test.css
#p1 {
color: red;
}
#p2 {
color: green;
}
#p3 {
color: blue;
}
You're trying to select an element based not on its HTML attributes, but on the CSS rules that are applied to it. This can't be done with a plain querySelector.
For the general case, iterate over all possibly matching elements and call getComputedStyle on each to find the one that matches:
const p = [...document.querySelectorAll('p')]
.find(p => window.getComputedStyle(p).color === 'rgb(255, 0, 0)');
console.log(p);
#p1 {
color: red;
}
#p2 {
color: green;
}
#p3 {
color: blue;
}
<p id="p1">red</p>
<p id="p2">green</p>
<p id="p3">blue</p>
Note that for color, you need to use rgb syntax.

On change input in parent send val to iframe with update

I need update iframe's content on input[text] changed(or on some another event).
For example: I'm typing in parent's input "Hello World!!!", and iframe's <h1>Hi</h1> is changing to
<h1>Hello World!!!</h1> symbol by symbol.
Better if solution will be on jQuery, but vanilla js is ok, too))
Thank you very much.
P.S. Sorry for my bad English(
better way is using Window.postMessage => https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
parent Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a Page..</title>
<style>
body { font-size: 16px; font-family: Arial, Helvetica, sans-serif; }
iframe { width: 300px; height: 200px; border: 1px solid #4593c6; }
</style>
</head>
<body>
<p>parent input :
<input id="in-Txt" type="text" placeholder="type something">
<button id="Bt-Send2iFrame">Send2iFrame</button>
</p>
<iframe id="in-Frame" src="xyz_frame.html" ></iframe>
<script>
const inText = document.querySelector('#in-Txt')
, btSend = document.querySelector('#Bt-Send2iFrame')
, inFramW = document.querySelector('#in-Frame').contentWindow
btSend.onclick=_=>{
let info = { inTxt: inText.value }
inFramW.postMessage( JSON.stringify(info), "*")
}
</script>
</body>
</html>
iframe page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p> the iframe </p>
<p id="info-Parent">...</p>
<script>
const infoParent = document.querySelector('#info-Parent')
window.onmessage=e=>
{
let message = JSON.parse ( e.data )
infoParent.textContent = message.inTxt
}
</script>
</body>
</html>
You can pass the value on the parent page as a parameter to the iframe.
Say for example the following
Parent HTML,
<input type="text" id="parenteElem">
<iframe id="frameOnParent">
Parent Script:
<script type="text/javascript">
$("#parentElem").on("change", function(event) {
$('#frameOnParent').attr('src', "test.html?param1=" + $(this).val());
})
</script>
Iframe HTML:
<h1>Hi</h1>
Iframe Script:
<script type="text/javascript">
function getHeader() {
var headerText = window.location.search.substring("param1");
return headerText;
}
var heading = getHeader();
$("h1").html(heading);
</script>

Array with a "graphical wrong" space

I've started jQuery, html and css recently and I do not really understand everything. As the work deals with all of these things, I don't know where my problem comes from.
I want to generate a html array with js (data will come (later) from a server). This array might be "dynamic" (automatic filling, updating, etc.) and nice to see (hence css).
I do have something "good" right now. The only thing is I do have a "hidden" column and I can't get rid of it.
var data = ["City 1", "City 2", "City 3"]; //headers
var data1= [["New York", 123, "Seattle"],
["Paris", "Milan", "Rome"],
["Pittsburg", "Wichita", "Boise"]];
var cityTable;
//Init and creation of the header
$(document).ready(function() {
cityTable = makeTable($("#test"), data);
appendTableColumn(cityTable, ["Calgary", "Ottawa", "Yellowknife"]);
});
// Add a line thanks to the button
$(function(){
$('#button').click(
function(e){
appendTableColumn(cityTable, ["Calgary", "Ottawa", "Yellowknife"]);
}
)
}
)
//Add a line method
function appendTableColumn(table, rowData) {
var lastRow = $("<tr class=\'row\'/>").appendTo(table.find('thead:last'));
$.each(rowData, function(colIndex, c) {
console.log(c);
lastRow.append($('<td id="cell" class=\'cell\'/>').text(c));
});
return lastRow;
}
//Creation of the table
function makeTable(container, data) {
var table = $("<table/>");
var row = $("<thead>");
row.append($("<tr class=\'row\'/>"));
$.each(data, function(rowIndex, r) {
row.append($("<th>").text(r));
row.append($("</th>"));
});
table.append(row);
return container.append(table);
}
tbody{
display: : block;
padding:20px;
max-width:800px;
margin:auto auto;
font-family:sans;
overflow-y: scroll;
}
table{
}
th {
background:#666;
color:#fff;
padding-left: 5px;
}
td {
padding:5px;
}
input {
height: 24px;
font-size: 18px;
padding:2px;
border:0;
}
body {
font: normal medium/1.4 sans-serif;
}
.cell:hover{
background-color:#FF7368;
}
.row:hover{
background-color:#E8CAB2;
}
.row:hover{
background-color:#E8CAB2;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Editable Table</title>
<link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js'></script>
<link rel="stylesheet" href="in0.css">
<link href="metro-icons.css" rel="stylesheet">
<script src="in0.js"></script>
</head>
<body>
<button id='button' type="button" >Click Me!</button>
<input type="search" id="search" placeholder="Filter by Title">
<table id="test"></table>
</body>
</html>
Ok, I don t really know why it s working but here what I changed and some words about.
function appendTableColumn(table, rowData) {
var lastRow = $("<tr class=\'row\'>").appendTo(table.find('tbody:last'));
$.each(rowData, function(colIndex, c) {
console.log(c);
lastRow.append($('<td id="cell" class=\'cell\'/>').text(c));
});
return lastRow;
}
function makeTable(container, data) {
var table = $("<table/>");
var row = $("<thead class=\'row\'>");
$.each(data, function(rowIndex, r) {
row.append($("<th >").text(r));
row.append($("</th>"));
});
table.append(row);
var row1 = $("<tbody >");
table.append(row1);
return container.append(table);
}
The problem was to get ride of this "blanc". Hence I searched a way to add "class=\'row\'" to the head (That way it sovles the thing). Hence I created a tbdy part after my table decleration and closed the initial function.
In appendTable, I start from tbody and can file the array with th right css.
I can not say why it s working but the fact is it s good.
Thanks.

display: inline; doesn't work with copy link

Can you explain me why only the third "copy link" works only if all panels are closed ?
I want my copy link works when it's in a panel and when a panel is open too.
HERE IS MY PAGE:
http://500milligrammes.com/facticemagazine/final/0/
JSFIDDLE
HERE IS MY CODE:
<!DOCTYPE HTML>
<!--[if IE 8]><html lang="en" class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script>
<style>
.panel1,
.panel2 {
display: none;
border: 1px solid #ccc;
background-color: #eee
}
.flip1,
.flip2 {
border: 1px solid #ccc;
background-color: #eee
}
#check,
#check2 {
visibility: hidden;
width: 12px;
height: 12px;
}
span#copy-callbacks,
span#copy-callbacks2 {
float: none;
cursor: pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("span#copy-callbacks").zclip({
path: "ZeroClipboard.swf",
copy: $('#callback-paragraph').text(),
beforeCopy: function() {
$('#copy-callbacks').css('background', 'none');
},
afterCopy: function() {
$('#copy-callbacks').css('background', 'none');
}
});
document.getElementById("copy-callbacks").onclick = function() {
document.getElementById("check").style.visibility = "visible";
}
});
$(document).ready(function() {
$('span#copy-callbacks').hover(
function() {
$(this).css({
"color": "#e0ccb4"
});
},
function() {
$(this).css({
"color": "#000"
});
}
);
$("span#copy-callbacks2").zclip({
path: "ZeroClipboard.swf",
copy: $('#callback-paragraph2').text(),
beforeCopy: function() {
$('#copy-callbacks2').css('background', 'none');
},
afterCopy: function() {
$('#copy-callbacks2').css('background', 'none');
}
});
document.getElementById("copy-callbacks2").onclick = function() {
document.getElementById("check2").style.visibility = "visible";
}
});
$(document).ready(function() {
$('span#copy-callbacks2').hover(
function() {
$(this).css({
"color": "#e0ccb4"
});
},
function() {
$(this).css({
"color": "#000"
});
}
);
$(".flip1").click(function() {
$(".panel1").slideToggle("fast");
});
$(".flip2").click(function() {
$(".panel2").slideToggle("fast");
});
});
</script>
</head>
<body>
<div class="flip1">Click to slide the first panel down or up</div>
<div class="panel1">
when this panel is open, any copy link works !!!
</div>
<div style="margin-top:150px;" class="flip2">Click to slide the second panel down or up</div>
<div class="panel2">
when a copy link is inside a panel, it doesn't work !!!
<br/>
<br/>
<span id="copy-callbacks">Copy link <img src="check.png" id="check" style="display: inline;"></span>
<span style="font-size:0px;" id="callback-paragraph">essaie sans alert</span>
</div>
<div style="margin-top:150px; ">
This one works perfectly when all panels are closed !!
<br/>
<span id="copy-callbacks2">Copy link <img src="check.png" id="check2" style="display: inline;"></span>
<span style="font-size:0px;" id="callback-paragraph2">essaie sans alert</span>
</div>
<script type="text/javascript" src="jquery.zclip.js"></script>
<script type="text/javascript" src="jquery.cbpFWSlider.min.js"></script>
</body>
</html>
ZClip adds an absolutely positioned flash (swf) object which clings to the bottom and when your panels are closed the zclip object container covers the third link and you can't click on it.
See your updated fiddle, I put a border around zclip and you can see that it's right over the link: http://jsfiddle.net/4x3qctno/2/
When you open panels it pushes third link down, but the zclip container stays in the same place and so your link works then.
To fix this, change z-index of zclip object container in CSS like so:
.zclip{
z-index:-1000!important;
}

javascript error 'cannot read property of undefined'

The javascript, html and css work in this jsfiddle
but when entered into an html file like so:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
var target = $(".mypara").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() >= target) {
alert("made it!");
clearInterval(interval);
}
}, 250);
</script>
<style>
body {
background-color: linen;
height: 1000px;
}
p {
color: blue;
margin-top: 500px;
}
</style>
</head>
<body>
<p class="mypara">asdfasdfasf</p>
</body>
</html>
chrome console gives this error
Uncaught TypeError: Cannot read property 'top' of undefined(anonymous function) # index - Copy.html:8
This error refers to line 8:
var target = $(".mypara").offset().top;
Can someone help me understand why?
Wrap your code in
$(document).ready (function (){
// code here
});
You're trying to access an element in the DOM before it exists so when your trying to access the class the item doesnt exist yet. Or move your script below the elements in the html
Works in fiddle cause thet wrap you're code depending on your setting which defaults to domready I believe
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<style>
body {
background-color: linen;
height: 1000px;
}
p {
color: blue;
margin-top: 500px;
}
</style>
</head>
<body>
<p class="mypara">asdfasdfasf</p>
<p class="mypara">Include js files to be at the bottom so that it would be the one to be loaded accordingly</p>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
// if document is ready then
// its the only time to execute
// process withing the block
$(document).ready(function() {
var target = $(".mypara").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() >= target) {
alert("made it!");
clearInterval(interval);
}
}, 250);
});
</script>
</body>
</html>

Categories

Resources