I'm creating web application with zTree.
The tree is built based on data from the Golang backend.
Tree leaves change custom icons while the application is running.
How to change icons, based on backend data, without refreshing the page?
With http-equiv="refresh" page is blinking and lost focus. Here is working but blinking sample with zTree and refresh (I cut of backend part for simplicity):
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="5">
<link rel="stylesheet" href="../static/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../static/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../static/js/jquery.ztree.core.js"></script>
</HEAD>
<BODY>
<div id="app">
<TABLE>
<TR>
<TD width=260px valign=top>
<ul id="tree" class="ztree"></ul>
</TD>
<TD valign=top>
<p>Some text</p>
</TD>
</TR>
</TABLE>
<SCRIPT type="text/javascript">
var zTree;
var setting = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
}
};
var zNodes = [
{id: 1, pId: 0, name: "root", icon:"../static/css/zTreeStyle/img/diy/c16green.png"},
{id: 2, pId: 1, name: "leaf", icon:"../static/css/zTreeStyle/img/diy/c16red.png"},
];
$(document).ready(function () {
var t = $("#tree");
t = $.fn.zTree.init(t, setting, zNodes);
});
</script>
</div>
</BODY>
</HTML>
I try to use Vue.js, but cannot bind data to zTree. Here is not working sample with Vue.js data binding inside script tag:
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../static/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../static/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../static/js/jquery.ztree.core.js"></script>
<script src="https://unpkg.com/vue"></script>
</HEAD>
<BODY>
<div id="app">
<TABLE>
<TR>
<TD width=260px valign=top>
<ul id="tree" class="ztree"></ul>
</TD>
<TD valign=top>
<p>{{ now }}</p>
<p>Some text</p>
</TD>
</TR>
</TABLE>
<SCRIPT type="text/javascript">
var zTree;
var setting = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
}
};
var zNodes = [
{id: 1, pId: 0, name: "root", icon:"../static/css/zTreeStyle/img/diy/c16green.png"},
{id: 2, pId: 1, name: "leaf", icon:"../static/css/zTreeStyle/img/diy/c16red.png"},
{id: 3, pId: 1, name: "foo", icon: {{ customIcon }} },
];
$(document).ready(function () {
var t = $("#tree");
t = $.fn.zTree.init(t, setting, zNodes);
});
const app = new Vue({
el: '#app',
data: {
now: new Date(),
customIcon : "../static/css/zTreeStyle/img/diy/c16green.png"
},
methods: {
updateDate() {
this.now = new Date();
}
},
mounted() {
setInterval(() => {
this.updateDate();
}, 1000);
},
})
</script>
</div>
</BODY>
</HTML>
Zipped sample (examples are inside template directory): https://drive.google.com/file/d/1Ihv8jLdsEz93aUrFjEugD1l6YvslaUT8
The solution contains a few steps:
use "go-echo-vue" for communication between backend and frontend like here: https://github.com/covrom/go-echo-vue
update zTree data using vue-resource and timer like this:
<script>
new Vue({
// ....
methods: {
updateZNodes() {
// запрашиваем дерево :)
this.$http.get('/znodes').then(function (response) {
zNodes = response.data.items ? response.data.items : []
}, function (error) {
console.log(error)
});
},
},
mounted() {
setInterval(() => {
this.updateZNodes();
}, 5000);
},
// ....
})</script>
refrest zTree nodes information using js:
<script language="JavaScript">
function refreshNode() {
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getNodes();
if (nodes.length > 0) {
for (let i = 0; i < nodes.length; i++) {
c = "static/css/zTreeStyle/img/diy/c16grey.png";
if (zNodes.length >= i) {
c = zNodes[i].icon
}
nodes[i].icon = c;
treeObj.updateNode(nodes[i]);
}
}
};
const timerId = setInterval(
() => {
refreshNode();
},
5000
);
</script>
add async zTree settings:
<script language="JavaScript">
var setting = {
// ....
async: {
enable: true,
url: "",
autoparam: ["id", "icon"],
datatype: "json",
},
// ....
};
</script>
That's all. So we have Vue function http.get to get fresh data from backend, global js variable to use that data both inside Vue code segment and JavaScript blocks.
PS additional information: https://www.tutorialfor.com/blog-188266.htm
Related
I have this code which output some values according to my users location and I want to display this values, On input but when I use <input value="{{useragent}}" /> it is just displaying {{useragent}} not the output.
<!DOCTYPE html>
<html lang="en">
<head> </head>
<body translate="no">
<div id="app">
<p>{{useragent}}</p>
<p>{{tsFormatted}}</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script id="rendered-js">
new Vue({
el: "#app",
data() {
return {
response: null,
ip: null,
useragent: null,
ts: null,
};
},
watch: {
// This should do a substring of the result returned by CloudFlare
response: function () {
this.ip = this.response.substring(this.response.search("ip=") + 3, this.response.search("ts="));
this.ts = this.response.substring(this.response.search("ts=") + 3, this.response.search("visit_scheme="));
this.useragent = this.response.substring(this.response.search("uag=") + 4, this.response.search("colo="));
},
},
computed: {
tsFormatted() {
return new Date(this.ts * 1000);
},
},
mounted() {
// Get the user's states from the cloudflare service
axios.get("https://www.cloudflare.com/cdn-cgi/trace").then((response) => (this.response = response.data));
},
});
//# sourceURL=pen.js
</script>
</body>
</html>
how can I display this {{values}} inside HTML <input> tag ?
When dealing with inputs, if you want useragent to fill the input field then use v-model instead of value
<input v-model="useragent" />
You can read more about it from Vue 2 DOCs: https://v2.vuejs.org/v2/guide/forms.html
You need to bind values :value or v-bind:value:
<!DOCTYPE html>
<html lang="en">
<head> </head>
<body translate="no">
<div id="app">
<input :value="useragent" />
<input v-bind:value="tsFormatted" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script id="rendered-js">
new Vue({
el: "#app",
data() {
return {
response: null,
ip: null,
useragent: null,
ts: null,
};
},
watch: {
// This should do a substring of the result returned by CloudFlare
response: function () {
this.ip = this.response.substring(this.response.search("ip=") + 3, this.response.search("ts="));
this.ts = this.response.substring(this.response.search("ts=") + 3, this.response.search("visit_scheme="));
this.useragent = this.response.substring(this.response.search("uag=") + 4, this.response.search("colo="));
},
},
computed: {
tsFormatted() {
return new Date(this.ts * 1000);
},
},
mounted() {
// Get the user's states from the cloudflare service
axios.get("https://www.cloudflare.com/cdn-cgi/trace").then((response) => (this.response = response.data));
},
});
//# sourceURL=pen.js
</script>
</body>
</html>
<input type="text" :value="useragent" />
or
<input type="text" v-model="useragent" />
vue Form Input Bindings doc
Before went to the solution, I have a question to you - Do you want one-way or two-way data binding for your input ?
If you will use :value, It will work as a one-way data binding and will just update the input value but if you will make any changes in your input it will not modify the model/variable.
If you will use v-model, It will work as a two way data binding and will update both input as well as model/variable if any changes happen at any end.
Live Demo :
new Vue({
el:'#app',
data:{
name:'Alpha'
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.4/vue.js"></script>
<div id="app">
<div>One Way binding <input type="text" :value="name"/></div>
<div>Two way binding : <input type="text" v-model="name"/> </div>
<div>Result : {{name}}</div>
</div>
I'm working on a Javascript function that will set a kendo.data.HierarchicalDataSource object using a url that fetches the data. At the end of this function, if the data source actually has data, I want to set a treeview with the data (which is already working). If it doesn't have data, instead of setting the treeview, I want to make a label visible that tells the user that there is no data.
My problem: How to I determine that there is/isn't data in the HierarchicalDataSource? When I try call any function or get any property of getData, it returns undefined.
function loadTreeGroupData(applicationId) {
var treeview = $("#treeview-kendo").data("kendoTreeView");
var url = $('#urlHolders').data("gettreeUrl");
var appId = 0;
if (applicationId != undefined && applicationId != "")
appId = applicationId;
var getData = new kendo.data.HierarchicalDataSource({
change: function (e) {
for (var i = 0; i < e.items.length; i++) {
e.items[i].load();
}
},
transport: {
read: {
url: url, //"GetAlertsTree",
dataType: "json",
contentType: "application/json",
data: { applicationId: appId }
}
},
schema: {
model: {
id: "id",
hasChildren: "hasChildren",
children: "measureGroups"
}
}
});
if (/*the treeview has data*/) {
treeview.setDataSource(getData);
} else {
/*set a label that tells the user that there's no data*/
}
}
I would suggest you to do the following changes in your code:
Set the HierarchycalDataSource at the treeView initialization, instead of add it later;
Declare treeView's div and label as display:none or whatever the way you hide them;
Use DataSource's requestEnd event to show/hide the elements.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/treeview/remote-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<div id="treeview" style="display: none"></div>
<div id="no-data-label" style="display: none">No data found</div>
</div>
<script>
var serviceRoot = "https://demos.telerik.com/kendo-ui/service";
homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot + "/Employees",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees"
}
},
requestEnd: (e) => {
if (e.response && e.response.length) {
$("#treeview").show();
$("#no-data-label").hide();
}
else {
$("#treeview").hide();
$("#no-data-label").show();
}
}
});
$("#treeview").kendoTreeView({
dataSource: homogeneous,
dataTextField: "FullName"
});
</script>
</div>
</body>
</html>
Dojo
I'm not familiar with js. I'd like to get the result of "file_get_contents" function and put it on the "source" (I have marked both with "https://.................).
Thank you in advance.
<script>
var myInit = {
referrer: '',
};
function file_get_contents(filename) {
fetch(filename, myInit).then((resp) => resp.text()).then(function(data) {
content = JSON.parse(data)
fetch(content['some']['media']['content'], myInit).then((resp) =>
resp.text()).then(function(data));});}
file_get_contents("https://.................");
</script>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/clappr#latest/dist/clappr.min.js">
</script>
</head>
<div id="player"></div>
<script>
window.onload = function() {
var player = new Clappr.Player({
source: 'http://......................',
parentId: "#player",
height: '100%',
width: '100%',
autoPlay: true,
});};
</script>
</body>
</html>
I currently have a set of nested templates that loops through JSON. It outputs the key, checks if the value is not an object, outputs the value if it's not an object, otherwise it goes deeper and traverses the inner object/array for that property. It goes about 3 layers deep currently, but may potentially have to go further.
This makes it a good candidate for recursion. I'm new to front-end languages/frameworks, and I am having trouble finding good resources on finding a good resource for how to traverse JSON dynamically with Vue. This was the best I could, but I'm not using predictable properties like label/node/nodes.
I guess a good place to start would be the Vue.component template. How do I pass in the JSON from the main Vue instance, and then how do I set the template to dynamically traverse the JSON?
HMTL
<!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>Vue: Recursion</title>
<!-- CDNs -->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
<!-- JS -->
<script src="app.js" charset="utf-8"></script>
</head>
<body>
<main id="app">
<template>
<section>
<recursive-component></recursive-component>
</section>
</template>
</main>
</body>
</html>
Javascript
$(function () {
// Get JSON
$.getJSON("./data.json", function (json) {
app.json = json
});
Vue.component('recursive-component', function() {
template: `
<recursive-component
v-if="node !== null"
v-for="(node, key) in nodes"
:nodes="node.nodes"
:key="node.key"
>
</recursive-component>`
});
var app = new Vue({
el: `#app`,
data: {
json: null
}
});
});
Generic JSON
{
"details": {
"manufacturer": "BMW",
"seats": 4,
"engine": {
"torque": 500,
"hp": 600
},
"breaks": {
"front": {
"type": "XYZ",
"capacity": 1234
}
}
}
}
The key of the solution is just checking if the data is a value or an object, I made this example assuming values are only numbers and strings (because to check if variable is an object is quite complicated StackOverflow), then the recursive component just displays the key/value accordingly.
const jsonData = {
"details": {
"manufacturer": "BMW",
"seats": 4,
"engine": {
"torque": 500,
"hp": 600
},
"breaks": {
"front": {
"type": "XYZ",
"capacity": 1234
}
}
}
};
Vue.component("my-recursive-component", {
template: '#my-recursive-component',
props: ["depth", "payload"],
data() {
},
computed: {
indent() {
return { transform: `translate(${this.depth * 10}px)` }
},
type() {
if (typeof this.payload === "string" || typeof this.payload === "number") {
return "value";
}
return "obj";
},
list() {
if (this.type === "obj") {
return Object.keys(this.payload);
}
return undefined;
}
}
});
const app = new Vue({
el: "#app",
data() {
jsonData
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
Recursive Component Demo:
<my-recursive-component
:payload="jsonData"
:depth="0"
>
</my-recursive-component>
</div>
<script type="text/x-template" id="my-recursive-component">
<div>
<div
v-if="type === 'obj'" :style="indent">
<div v-for="item in list">
Key: {{item}}
<my-recursive-component
:payload="payload[item]"
:depth="depth + 1"
>
<my-recursive-component/>
</div>
</div>
<div
v-if="type === 'value'" :style="indent">
Value: {{payload}}
</div>
</div>
</script>
I am learning VueJS 2.0 and I am connecting to an API where I want the value of some data to change on input change. Here is what the output says using the dev tools:
canadianDollar:undefined
europeanEuro:undefined
europeanPound:undefined
usd:"1232"
Whenever I put 1232 in the USD input field it doesn't return anything and leaves those properties as undefined. Here is the code.
new Vue({
el: '#app',
data: {
usd: '',
canadianDollar: '',
europeanPound: '',
europeanEuro: ''
},
// Watch methods
watch: {
usd: function() {
this.convertCurrency()
}
},
// Logic Methods
methods: {
convertCurrency: _.debounce(function() {
var app = this;
if (app.usd.length !== 0) {
// Show that the things are loading in.
app.canadianDollar = 'Searching...'
app.europeanPound = 'Searching...'
app.europeanEuro = 'Searching...'
console.log(app.usd)
axios.get("http://api.fixer.io/latest?base=USD&" + app.usd)
.then(function(response) {
app.canadianDollar = response.data.CAD
app.europeanPound = response.data.GBP
app.europeanEuro = response.data.EUR
})
.catch(function(error){
app.canadianDollar = "ERROR"
app.europeanPound = "ERROR"
app.europeanEuro = "ERROR"
})
}
}, 500)
}
})
and the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Vue</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" name="" value="" v-model="usd">
<ul>
<li>Canadian Dollar: {{canadianDollar}}</li>
<li>European Pound: {{europeanPound}}</li>
<li>European Euro: {{europeanEuro}}</li>
</ul>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js" charset="utf-8"></script>
<script src="index.js" charset="utf-8"></script>
</body>
</html>
When I type in a number it does give me the "Searching" part but disappears and nothing shows up.
I would recommend changing
then(function(response) {
app.canadianDollar = response.data.CAD
app.europeanPound = response.data.GBP
app.europeanEuro = response.data.EUR
})
to
then(function(response) {
console.log(response);
})
that was you can see what is being returned.
Also, axios.get("http://api.fixer.io/latest?base=USD&" + app.usd) should probably have a name like vulue:axios.get("http://api.fixer.io/latest?base=USD&VALUE=" + app.usd), but you'll have to check their api to see what it is meant to be called.
...
response.data.rates.CAD;
you have
response.data.CAD;
...
app.canadianDollar = response.data.rates.CAD * app.usd;