how to get jstree instance from iframe source? - javascript
I have prepare 2 tree view in separate iframe using jstree. The right tree view should control the left tree view. When user click one one the list in right tree view, the respective item folder will open and selected on left tree view. I can make it happen using div in single page. I control the left tree view using instance of left tree view in right jstree div var instance = $('#left').jstree(true);.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.11/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.11/themes/default/style.min.css" />
<meta charset="UTF-8">
<title>jstree basic demos</title>
<style>
html { margin:0; padding:0; font-size:62.5%; }
body { max-width:800px; min-width:300px; margin:0 auto; 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; }
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 1px solid black;
}
.flex-child:first-child {
margin-right: 20px;
}
</style>
</head>
<body>
<h1>Tree Menu</h1>
<!-- <button id="evts_button">select node with id 1</button> <em>either click the button or a node in the tree</em>-->
<div class="flex-container">
<div class="flex-child magenta">
<div id="left" class="demo">
</div>
</div>
<div class="flex-child green">
<div id="List">
</div>
</div>
</div>
<script>
$('#left')
.jstree({
'core' : {
'multiple' : false,
'data' : [
{
"text":"A","id":"A","children":[
{"text":"Australia","id":"Aus"},
{"text":"America","id":"Ame"}
]
},
{
"text":"B","id":"B","children":[
{"text":"Beirut","id":"Bei"},
{"text":"Brunei","id":"Bru"}
]
}
]
}
});
$('#List')
.on("changed.jstree", function(e,data){
if(data.selected.length)
{
$("#left").jstree("close_all");
//console.log(data.selected);
selected_node=data.selected[0];//list-j2_1
console.log(selected_node);
var tm_id = selected_node.replace("j2_", "");//tree
var instance = $('#left').jstree(true);
instance.deselect_all();
instance.select_node(tm_id);
$("#left").jstree("open_all", tm_id);
}
})
.jstree({
'core':{
'multiple':false,
'data':[{"text":"Australia", "id":"Aus"},
{"text":"America", "id":"Ame"},
{"text":"Beirut","id":"Bei"},
{"text":"Brunei", "id":"Bru"}]
}
})
</script>
</body>
</html>
When using iframe, I could not get the instance of left tree view. I want to get left tree view instance in index-10_2.html(right iframe source) to select and open respective node. I had use left=$("#1").contents(); to get the iframe content, var instance=left.find('#left'); to get instance, and instance.select_node(tm_id); to select node. But, error instance.select_node is not a function shown.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="vakata-jstree-4a77e59/dist/jstree.min.js"></script>
<link rel="stylesheet" href="vakata-jstree-4a77e59/dist/themes/default/style.min.css" />
</head>
<body>
<iframe src="index-10_1.html" id="1"></iframe>
<iframe src="index-10_2.html" id="2"></iframe>
</body>
</html>
index-10_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="vakata-jstree-4a77e59/dist/jstree.min.js"></script>
<link rel="stylesheet" href="vakata-jstree-4a77e59/dist/themes/default/style.min.css" />
</head>
<body>
<div class="content demo" id="left"></div>
<script>
$('#left')
.jstree({
'core' : {
'multiple' : false,
'data' : [
{
"text":"A","id":"A","children":[
{"text":"Australia","id":"Aus"},
{"text":"America","id":"Ame"}
]
},
{
"text":"B","id":"B","children":[
{"text":"Beirut","id":"Bei"},
{"text":"Brunei","id":"Bru"}
]
}
]
}
});
</script>
</body>
</html>
index-10_2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="vakata-jstree-4a77e59/dist/jstree.min.js"></script>
<link rel="stylesheet" href="vakata-jstree-4a77e59/dist/themes/default/style.min.css" />
</head>
<body>
<div class="content" id="right"></div>
<script>
$('#right')
.on("changed.jstree", function(e,data){
if(data.selected.length)
{
$("#left").jstree("close_all");
console.log(data.selected);
selected_node=data.selected[0];//list-j2_1
console.log(selected_node);
var tm_id = selected_node.replace("j2_", "");//tree
left=$("#1").contents().find('#left');
instance=left.jstree(true);
instance.select_node(tm_id);
$("#left").jstree("open_all", tm_id);
}
})
.jstree({
'core':{
'multiple':false,
'data':[{"text":"Australia", "id":"Aus"},
{"text":"America", "id":"Ame"},
{"text":"Beirut","id":"Bei"},
{"text":"Brunei", "id":"Bru"}]
}
})
</script>
</body>
</html>
I had used document.getElementById('1').contentWindow.jQuery('#left').jstree(true); to get instance from iframe with id='1'. In order to listen to right iframe(with id='2') if any menu has been clicked, I used document.getElementById('2').contentWindow.jQuery('#right').on("changed.jstree",function(e,data){}). I get the instance of left iframe within this function. By using this instance, I has deselect previous selection, select current selection, and open children of selected menu.
index-12.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates and open the template
in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="vakata-jstree-4a77e59/dist/jstree.min.js"></script>
<link rel="stylesheet" href="vakata-jstree-4a77e59/dist/themes/default/style.min.css" />
</head>
<body>
<iframe src="index-12_1.html" id="1"></iframe>
<iframe src="index-12_2.html" id="2"></iframe>
<script>
sec_frm =document.getElementById('2');//second frame
sec_frm.addEventListener("load",function(){//wait for second frame to load
fst_frm_jstinst=document.getElementById('1').contentWindow.jQuery('#left').jstree(true);//first frame jstree instance
document.getElementById('2').contentWindow.jQuery('#right').on("changed.jstree",function(e,data){
if(data.selected.length){
//close all menu in first frame
document.getElementById('1').contentWindow.jQuery('#left').jstree("close_all");
//get selected menu id from second frame
selected_node=data.selected[0];
//deselect any selected menu on first frame
fst_frm_jstinst.deselect_all();
//select node(country)
fst_frm_jstinst.select_node(selected_node);
document.getElementById('1').contentWindow.jQuery('#left').jstree("open_all",selected_node);
//console.log(selected_node);
}
})
})
</script>
</body>
</html>
index-12_1
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="vakata-jstree-4a77e59/dist/jstree.min.js"></script>
<link rel="stylesheet" href="vakata-jstree 4a77e59/dist/themes/default/style.min.css"/>
</head>
<body>
<div class="content demo" id="left"></div>
<script>
$('#left')
.jstree({
'core' : {
'multiple' : false,
'data' : [
{
"text":"A","id":"A","children":[
{"text":"Australia","id":"Aus"},
{"text":"America","id":"Ame"}
]
},
{
"text":"B","id":"B","children":[
{"text":"Beirut","id":"Bei"},
{"text":"Brunei","id":"Bru"}
]
}
]
}
});
</script>
</body>
</html>
index-12_2.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="vakata-jstree-4a77e59/dist/jstree.min.js"></script>
<link rel="stylesheet" href="vakata-jstree-4a77e59/dist/themes/default/style.min.css" />
</head>
<body>
<div class="content" id="right"></div>
<script>
$('#right')
.jstree({
'core':{
'multiple':false,
'data':[{"text":"Australia", "id":"Aus"},
{"text":"America", "id":"Ame"},
{"text":"Beirut","id":"Bei"},
{"text":"Brunei", "id":"Bru"}]
}
})
</script>
</body>
</html>
Related
map function is not creating any div inside myContent div when I am using innerHTML for myContent div ,No result is coming ,no error in console
index.html
You can See here myContent classnamed div is there inside which I want to add div of api data from index.js file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="myContent">
</div>
</div>
<script src="index.js"></script>
</body>
</html>
index.js
Here you can see I have used map function to map through each data of storeData array, but it is not working, DOM shows nothing
var storeData=[]
const getData=()=>{
axios.get("https://api.coingecko.com/api/v3/coins/markets?
vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false").then(
res=>{
storeData.push(res.data)
//console.log(storeData)
}
)
}
getData();
const myContent=document.querySelector(".myContent")
myContent.innerHTML=storeData.map((elem)=> {
return`
<div class='card'>
<div class="card-content">
<h3>${elem.name}</h3>
<h3>${elem.symbol}</h3>
<h3>${elem.current_price}</h3>
</div>
</div>
`
});
How do you send a request and display 1 part of the information on the page using javascript
How do i make a get request to https://my-ocular.jeffalo.net/api/users/PoIygon and display the "status" on status, "color" is the background color of the id "color" and "name" has the name on this html code? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>YAY</title> <link rel="shortcut icon" href="/logo - Copy.png" type="image/png"> </head> <body> <div class="wrapper"> <span id="name">name</span> / <span id="status"> status <div id="color">css background is the color</div> </span> </div> </body> </html>
My solution is to use fetch api and create the content dynamically. There was a slight issue with your html, a div element is not able to be a child of a span element so I modified it slightly. I hope this works for you.
const wrapper = document.querySelector('.wrapper');
function createContent(data) {
const content = `
<div id="color" style="background-color: ${data.color};">
<span id="name">${data.name}</span>
/
<span id="status">${data.status} </span>
</div>
`;
wrapper.insertAdjacentHTML('beforeend', content);
}
fetch('https://my-ocular.jeffalo.net/api/user/PoIygon')
.then(response => response.json())
.then(data => createContent(data))
.catch((error) => console.log(error));
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YAY</title>
<link rel="shortcut icon" href="/logo - Copy.png" type="image/png">
</head>
<body>
<div class="wrapper">
<!-- add JS dynamically here -->
</div>
</body>
</html>
How to run js function after popover content loads - after button click?
I have this kind of bootstrap popover from W3 schools site and edited code for my situation (see onPopoverHtmlLoad() function):
<!DOCTYPE html>
<!-- https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h -->
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
Toggle popover
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
//how to ensure to run this function on popoverHtmlDomLoad?
function onPopoverHtmlLoad(){
document.getElementById("inpopover_button").innerHTML = "true"
}
</script>
</body>
</html>
Question is, how can I change HTML data content of popover after I hit
popover button/trigger, please? Is there some function like
onHtmlDomPopoverLoad?
I appreciate solutions in Javascript, but accept JQuery help too. I was looking for similar issues but didn't find anything yet.
You can replace onPopoverHtmlLoad with:
function onPopoverHtmlLoad(){
$("#inpopover_button").text("true")
}
And attach the event handler with:
$('[data-toggle="popover"]').on('shown.bs.popover', onPopoverHtmlLoad)
See the codepen: https://codepen.io/anon/pen/MxXwQe
read about bootstrap popover events here :
https://getbootstrap.com/docs/4.0/components/popovers/#events
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
})
<!DOCTYPE html>
<!-- https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h -->
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
Toggle popover
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover()
.on('shown.bs.popover', onPopoverHtmlLoad);
});
//how to ensure to run this function on popoverHtmlDomLoad?
function onPopoverHtmlLoad(){
document.getElementById("inpopover_button").innerHTML = "true"
}
</script>
</body>
</html>
how to render array of object in html element using javascript using map function ? Pure Javascript
how to render an array of object in HTML element using javascript using map function (without React).
So, that when insert an object in user detail it should create a card for the user dynamically.
Output
var Usrdata = document.querySelector('.box');
var userDetail = [
{name:"sunil",age:"24",place:"delhi",avatar:"./image/abc.jpg",country:"India"},
{name:"sujan",age:"22",place:"assam,",avatar:"./image/abc.jpg",country:"India"},
{name:"abishek",age:"26",place:"kolkata",avatar:"./image/abc.jpg",country:"India"},
{name:"chiranjeev",age:"20",place:"bangalore",avatar:"./image/abc.jpg",country:"India"},
]
userDetail.map(user=>{
console.log (
user.name,
user.age,
user.place,
user.country,
user.avatar
)
})
*{
margin: 0;
padding: 0;
}
.box{
margin: 10px;
height: 250px;
background-color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Testing</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="customCard">
<div class="row">
<div id="test1" class="col-sm-4 box">
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Use the map to create DOM and attach to the test1 element:
var Usrdata = document.querySelector('.box');
var userDetail = [
{name:"sunil",age:"24",place:"delhi",avatar:"./image/abc.jpg",country:"India"},
{name:"sujan",age:"22",place:"assam,",avatar:"./image/abc.jpg",country:"India"},
{name:"abishek",age:"26",place:"kolkata",avatar:"./image/abc.jpg",country:"India"},
{name:"chiranjeev",age:"20",place:"bangalore",avatar:"./image/abc.jpg",country:"India"},
]
document.getElementById('test1').innerHTML = userDetail.map(user =>
`<div>
<div>Name: ${user.name}</div>
<div>Age: ${user.age}</div>
<div>Place: ${user.place}</div>
<div>Country: ${user.country}</div>
<div>Avatar: ${user.avatar}</div>
</div>`
).join('')
*{
margin: 0;
padding: 0;
}
.box{
margin: 10px;
height: 250px;
background-color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Testing</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="customCard">
<div class="row">
<div id="test1" class="col-sm-4 box">
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
External stylesheet in custom element (no Polymer)
I'm building a custom element. this is my code:
<!DOCTYPE html>
<html>
<template>
<link rel="stylesheet" type="text/css" href="pols-notifier.css">
<div class="body">
<button class="close"></button>
<div class="content"></div>
</div>
</template>
<script>
class PolsNotifier extends HTMLElement {
constructor() {
super();
this.currentDocument = document.currentScript.ownerDocument;
}
connectedCallback() {
const instance = this.currentDocument.querySelector('template').content.cloneNode(true);
this.attachShadow({mode: 'open'}).appendChild(instance);
}
}
window.customElements.define('pols-notifier', PolsNotifier);
</script>
</html>
And the page is:
<!Doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="import" href="http://localhost:8080/assets/pols-notifier/pols-notifier.html">
<body>
<pols-notifier></pols-notifier>
</body>
</html>
The console show an error when try load the stylesheet. The file of custom element and the stylesheet are in /assets/pols-notifier directory in my project but the navigator is looking /pols-notifier.css.
Why is looking there?
Greeting. Thanks.