I'm new to Bootstrap-treeview (bootstrap-treeview.js v1.0.2). I'm trying to display the tree given in the docs, but it doesn't show up.
I've checked the 2 files, didn't spot the mistake.
html:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'bootstrap-treeview.min.css' %}">
<title>test</title>
</head>
<body>
<div class="container">
<div id="tree"></div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" integrity="sha256-ivk71nXhz9nsyFDoYoGf2sbjrR9ddh+XDkCcfZxjvcM=" crossorigin="anonymous"></script>
<script src="{% static 'bootstrap-treeview.min.js' %}"></script>
<script src="{% static 'functions.js' %}"></script>
</body>
</html>
functions.js
function getTree() {
var tree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1",
},
{
text: "Grandchild 2",
}
]
},
{
text: "Child 2",
}
]
},
{
text: "Parent 2",
}
];
return tree;
}
$('#tree').treeview({data: getTree()});
You are creating array tree, but returning data in the getTree function
Related
I'm trying to add the parameter "pokemonName" to the api url that's being fetched with axios. My goal is to display the JSON data for each new pokemon the that the user enters within an input text field.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Pokemon Search</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app" class="container">
<div>{{ results }}</div><br />
Search: <input type="text" v-model.lazy="pokemonName" #change="getPokemon">
</div>
<script src="script.js"></script>
</body>
</html>
And here is my js:
new Vue({
el: '#app',
data() {
return {
results: [],
pokemonName: ""
}
this.$set(this.pokemonName)
},
methods: {
getPokemon() {
// await axios
fetch('https://pokeapi.co/api/v2/pokemon/' + this.pokemonName)
//.then(response => (this.results = response.data));
.then(response => response.json()).then(data => {
this.pokemonName = data;
})
.catch(function(error) {
console.log(ERROR);
})
}
},
mounted: function mounted() {
this.getPokemon()
}
});
Your code working correctly. Type a number to see the name. You need to set the results.
new Vue({
el: '#app',
data() {
return {
results: [],
pokemonName: ""
}
this.$set(this.pokemonName)
},
methods: {
getPokemon() {
// await axios
fetch('https://pokeapi.co/api/v2/pokemon/' + this.pokemonName)
//.then(response => (this.results = response.data));
.then(response => response.json()).then(data => {
this.results = data.name;
})
.catch(function(error) {
console.log(ERROR);
})
}
},
mounted: function mounted() {
this.getPokemon()
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Pokemon Search</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app" class="container">
<div>{{ results }}</div><br /> Search: <input type="text" v-model.lazy="pokemonName" #change="getPokemon">
</div>
</body>
</html>
I am new to VueJs. As a start, I am trying to create a page which on button click increases or decreases age. However, the age is not rendering on to the html. Given below are the reqd files:
HTML:
<!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</title>
<script src="https://unpkg.com/vue#2.6.11/dist/vue.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app">
<h1>Events</h1>
<button #click="add">Add a year</button>
<button #click="subtract">Subtract a year</button>
<p>{{ age }}</p>
</div>
<script src="app.js"></script>
</body>
</html>
app.js:
new Vue({
el: '#app',
data: {
age:22
},
methods: {
add: function(){
this.age++;
}
subtract: function(){
this.age--;
}
}
});
Any help is appreciated!
problem is missing comma symbol after add function :D .
Correct version of app.js as below :
new Vue({
el: '#app',
data: {
age:22
},
methods: {
add: function(){
this.age++;
},
subtract: function(){
this.age--;
}
}
});
I am trying to render a component but I get the error: property or method
"joke" is not defined in is not defined on the instance but referenced during render. I am using the dad jokes api to get data via the axios http library. Here is my code:
var joke = Vue.component('joke', {
template: '#joke',
data() {
return {
jokes: []
};
},
created() {
axios
.get('https://icanhazdadjoke.com/search', {
headers: {
Accept: 'application/json'
},
params: {
limit: 30
}
})
.then(response => {
this.jokes = response.data.results;
});
}
});
new Vue({
el: '#main'
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue Dad JOkes</title>
<!--styles-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!--scripts-->
<script src="https://unpkg.com/vue#2.1.10/dist/vue.js" charset="utf-8"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="main">
<joke></joke>
</div>
<template id="joke">
<ul>
<li v-for="joke in jokes"></li>
<p>{{joke.joke}}</p>
</ul>
</template>
<script src = "app.js" charset="utf-8"></script>
</body>
</html>
It's a simple issue with the html, you had ended the </li> before using {{joke}}
Change
<ul>
<li v-for="joke in jokes"></li>
<p>{{joke.joke}}</p>
</ul>
to
<ul>
<li v-for="joke in jokes">
<p>{{joke.joke}}</p>
</li>
</ul>
Here's your working example:
var joke = Vue.component('joke', {
template: '#joke',
data() {
return {
jokes: []
};
},
created() {
axios
.get('https://icanhazdadjoke.com/search', {
headers: {
Accept: 'application/json'
},
params: {
limit: 30
}
})
.then(response => {
this.jokes = response.data.results;
});
}
});
new Vue({
el: '#main'
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue Dad JOkes</title>
<!--styles-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!--scripts-->
<script src="https://unpkg.com/vue#2.1.10/dist/vue.js" charset="utf-8"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="main">
<joke></joke>
</div>
<template id="joke">
<ul>
<li v-for="joke in jokes">
<p>{{joke.joke}}</p>
</li>
</ul>
</template>
<script src = "app.js" charset="utf-8"></script>
</body>
</html>
I need to use javascript (with no tag) to setup videojs with below simple codes, but the css seems not loaded correctly, what's the right way for this as the HTML way is ?
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="http://vjs.zencdn.net/5.0/video-js.css" rel="stylesheet" type="text/css">
<script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
<script src="http://vjs.zencdn.net/5.0/video.js"></script>
</head>
<body>
<div id="videoarea"></div>
<script>
var container = document.getElementById("videoarea");
videojs(container, {
controls: true,
class:'video-js vjs-default-skin',
techOrder: ["html5", "flash"],
source: {
type : 'rtmp/mp4',
src : 'rtmp://live.hkstv.hk.lxdns.com/live/hks'
}
}, function() {
});
</script>
</body>
</html>
You have to include an html5 video tag on the page. This ensures proper device fallback and is required for videojs to properly load.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="http://vjs.zencdn.net/5.0/video-js.css" rel="stylesheet" type="text/css">
<script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
<script src="http://vjs.zencdn.net/5.0/video.js"></script>
</head>
<body>
<video id="videoarea" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="264"> </video>
<script>
var container = document.getElementById("videoarea");
videojs(container, {
controls: true,
class:'video-js vjs-default-skin',
techOrder: ["html5", "flash"],
source: {
type : 'rtmp/mp4',
src : 'rtmp://live.hkstv.hk.lxdns.com/live/hks'
}
}, function() {
});
</script>
</body>
</html>
I have been trying all day to "catch" or assign/bind to the chosen state and assign it to a variable called "text" so that I can use it in yet another API call for the other drop down box "Products".
I figured I must just be missing something and was hoping for a little help.
Thanks.
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<title>Legis Connect</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="css/kendo.common.min.css">
<link rel="stylesheet" href="css/kendo.black.min.css">
<link rel="stylesheet" href="css/kendo.mobile.all.min.css">
<link rel="stylesheet" href="css/kendo.dataviz.min.css">
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div class="k-widget k-header">
<span class="infoHead">Information</span>
<p>
<input id="state" placeholder="Select State..." />
</p>
<p>
<input id="products"/>
</p>
<script>
$(document).ready(function() {
$("#state").kendoDropDownList({
// optionLabel: "Select State...",
dataTextField: "name",
dataValueField: "abbreviation",
dataSource: {
transport: {
read: {
url: "http://openstates.org/api/v1/metadata/?apikey=????????",
dataType: "jsonp"
}
}
}
});
// change: function(test){
// var text = this.value()
var states=$("#state").data("kendoDropDownList");
states.bind("change", function(e) {
var text = (this.value())
alert (text)
});
$("#products").kendoDropDownList({
optionLabel: "Select product...",
dataTextField: "legislature_name",
dataValueField: "legislature_name",
dataSource: {
transport: {
read: {
url: "http://openstates.org/api/v1/metadata/"+text+"/?apikey=???????????????????",
dataType: "jsonp"
}
}
}
})
$("#products").data("kendoDropDownList");
});
</script>
</div>
</body>
</html>
It appears that you're trying to create cascading dropdowns; when you choose a value in the states dropdown list, it loads the products available for the selected state. There's a helpful article from Telerik on how to do that with the combo box controls (works the same from dropdown lists): http://docs.kendoui.com/getting-started/web/combobox/cascading. There's actually a property called cascadeFrom which you can set on the products dropdown list to tell it to cascade from the states dropdown list. Hope that helps!