Hello I am working with Kendo UI, specifically with kendoAutoComplete component. I can get the value of autocomplete field, but I need the id value associated with it.
$("#autocomplete").kendoAutoComplete({
minLength: 3,
dataTextField: "Name", //JSON property name to use
dataValueField: "Id",
dataSource: respuestaSolicitud
});
I captured of this way
var x=$('#autocomplete').data("kendoAutoComplete");
Variable x return [object]
document.getElementById('autocomplete').value
return value of dataTextField: "Name"
But I need integer value dataValueField: "Id"
$(document).ready(function () {
var data = [{Name:"aaaa",Id:1111},{Name:"bbbb",Id:2222}
];
//create AutoComplete UI component
$("#countries").kendoAutoComplete({
dataSource: data,
change: function(e){
alert(this.dataItem().Id)
},
dataTextField: "Name", //JSON property name to use
dataValueField: "Id",
filter: "startswith",
placeholder: "Select country...",
separator: ", "
});
});
function _getValue(){
alert($("#countries").data("kendoAutoComplete").value())
}
.info {
display: block;
line-height: 22px;
padding: 0 5px 5px 0;
color: #36558e;
}
#shipping {
width: 482px;
height: 152px;
padding: 110px 0 0 30px;
background: url('../content/web/autocomplete/shipping.png') transparent no-repeat 0 0;
margin: 100px auto;
}
.k-autocomplete
{
width: 250px;
vertical-align: middle;
}
.hint {
line-height: 22px;
color: #aaa;
font-style: italic;
font-size: .9em;
color: #7496d4;
}
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
<div id="example">
<div id="shipping">
<button onclick="_getValue()">press me</button>
<label for="countries" class="info">Choose shipping countries:</label>
<input id="countries" />
<div class="hint">Start typing the name of an European country</div>
</div>
you can use underscore to find the result
var selected = $("#countries").data("kendoAutoComplete").value();
var dataItem = _.find($("#$("#countries").data("kendoAutoComplete").dataSource.data(),function(element){
return element.Name=== selected;
})
alert (dataItem.Id)
another approach would be to use a change event and onthat event you get the full element with this.dataItem() so you get the Id with
this.dataItem().Id
Related
I have a code that converts JSON from database to a chart. But more than one JSON can come from the database in the form of an array.
I want it to convert all of them to charts with forEach, but it doesn't work. I think the divs are overlapping.
It always displays the latest data in chart form. What could be the problem? and how can it be solved?
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div class="container">
<span style="margin-right: 5px;">Years: </span>
<span title="{{year.year}}"><input type="radio" id="id{{year.year}}" name="year" value="{{year.year}}" checked="checked"></span>
<label for="id{{year.year}}"></label>
<span title="{{year.year}}"><input type="radio" id="id{{year.year}}" name="year" value="{{year.year}}"></span>
<label for="id{{year.year}}"></label>
<span style="margin-left: 100px; margin-right: 5px;">Categories: </span>
<span title="{{category.name}}"><input type="radio" id="id{{category.name}}" name="category" value="{{category.name}}" checked="checked"></span>
<label for="id{{category.name}}"></label>
<span title="{{category.name}}"><input type="radio" id="id{{category.name}}" name="category" value="{{category.name}}"></span>
<label for="id{{category.name}}"></label>
<div class="chart-commands">
<select class="btn btn-primary command-btn">
<option value="EN">EN</option>
<option value="AZ">AZ</option>
</select>
</div>
</div>
<!-- Codes of charts -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
#container {
height: 400px;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
</style>
</head>
<body>
<div class="container">
<div id="container" style="width:100%; height:400px;"></div>
<script type="text/javascript">
const jsonTables = ['[{"":"1","name":"data en","a":"5"}]', '[{"":"1","name":"data en","a":"56"},{"":"2","name":"data","a":"45"},{"":"3","name":"data","a":"74"}]', '[{"":"1","name":"data ru","a":"46"},{"":"2","name":"data","a":"72"},{"":"3","name":"data","a":"33"}]']
console.log(jsonTables)
jsonTables.forEach((table) => {
console.log(table);
var jsonChart = JSON.parse(table)
// JSON.parse(JSON.parse('{{ chart_json_string | escapejs }}'))
let secColumn = []
for(let i=0; i<jsonChart.length; i++){
let key=Object.keys(jsonChart[i])[1]
secColumn.push(jsonChart[i][key])
}
let all = []
for(let i=0;i<jsonChart.length;i++){
for(let j=2;j<Object.keys(jsonChart[i]).length;j++){
all.push(Object.keys(jsonChart[i])[j])
}
}
let keys = [...new Set(all)];
let column = []
for (let key of keys) {
let x = jsonChart.map(e => {
if(e[key]){
return Number(e[key].replace("%",""))
}
})
column.push({ name: key, data: x })
}
document.addEventListener('DOMContentLoaded', function () {
const chart = Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Name'
},
xAxis: {
categories: secColumn
},
yAxis: {
title: {
text: 'Values'
}
},
series: column
});
});
});
</script>
</div>
</body>
You have configured the series as series: column. You need to separate your data and put it into data arrays.
You can use a basic column, stacked column, or column comparison but all of them use a series array, e.g.
series: [{
name: 'BPL',
data: [3, 5, 1, 13]
}, {
name: 'FA Cup',
data: [14, 8, 8, 12]
}, {
name: 'CL',
data: [0, 2, 6, 3]
}]
See demo pages on highcharts.com:
https://www.highcharts.com/demo/column-basic
https://www.highcharts.com/demo/column-stacked
https://www.highcharts.com/demo/column-comparison
The demo pages allow you to open the code in jsfiddle or codepen.
Im trying to do a live filter of some JSON thats displayed in a HTML PRE block, id like to be able to query anything and have that particular Json dict be displayed. im not sure if there is a module out there already for this or what it would be called?
thus far I have as follows, which when I type in the search box just removes all data, and when I delete the text in the search box all the data remains lost too until page fresh.
ideally id like to type any of the following to filter:
STR-LAB-RTR-01
config_applied=SUCCCESS (or equal syntax to show all successes)
config_applied=FAILUER (or equal syntax to show all failures)
error: not none (or equal syntax to show all errors)
im hoping something already exists for this and I just dont know its name?
Thanks
var json_data = [{'hostname': 'STR-LAB-RTR-01', 'config_applied': 'SUCCESS', 'error': 'None'}, {'hostname': 'STR-LAB-RTR-02', 'config_applied': 'FAILED', 'error': 'None'}]
function find_in_object(my_object, my_criteria){
return my_object.filter(function(obj) {
return Object.keys(my_criteria).every(function(c) {
return obj[c] == my_criteria[c];
});
});
}
function display_json(data){
try {
data = JSON.stringify(data, undefined, 2)
}
catch {
console.log('unable to format JSON data')
}
return data
}
$("#script_results").html(display_json(json_data));
$("#txt-search").on("keyup", function() {
var value = $(this).val().toLowerCase();
var filtered_json = find_in_object(JSON.parse(json_data), value);
$("#script_results").html(display_json(filtered_json));
});
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
white-space: pre-wrap;
}
</style>
<div class="col-lg-12 h-100 d-flex flex-column mt-3">
<div class="form-group">
<input type="input" class="form-control input-lg" id="txt-search" placeholder="Filter results">
</div>
<div class="flex-grow-1">
<pre id="script_results">
</pre>
</div>
</div>
Based on my understanding I created below answer and I prepared regular expression with ignoring case, if you want to case sensitive you can remove i from regular express new RegExp(my_criteria,'ig').
var json_data = [{'hostname': 'STR-LAB-RTR-01', 'config_applied': 'SUCCESS', 'error': 'None'}, {'hostname': 'STR-LAB-RTR-02', 'config_applied': 'FAILED', 'error': 'None'}];
var stringData = JSON.stringify(json_data);
function find_in_object(my_object, my_criteria){
var _value = new RegExp(my_criteria,'ig');
return my_object.filter(function(obj) {
var _data = JSON.stringify(obj);
return _value.test(_data);
});
}
function display_json(data){
try {
data = JSON.stringify(data, undefined, 2)
}
catch {
console.log('unable to format JSON data')
}
return data
}
$("#script_results").html(display_json(json_data));
$("#txt-search").on("keyup", function() {
var value = $(this).val();
var filtered_json = find_in_object(JSON.parse(stringData), value);
$("#script_results").html(display_json(filtered_json));
});
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
white-space: pre-wrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12 h-100 d-flex flex-column mt-3">
<div class="form-group">
<input type="input" class="form-control input-lg" id="txt-search" placeholder="Filter results">
</div>
<div class="flex-grow-1">
<pre id="script_results">
</pre>
</div>
</div>
I have a problem i'm working on, my program will highlight words if typed in an input field. It wont highlight words from both.(Example Input1 type "Test1", Input2 type "Test2") is there a way to keep the highlighted words active from one field when the user switches to another?
JSBIN: http://jsbin.com/xovisayaso/edit?html,css,js,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<title>JS Bin</title>
</head>
<body>
<div id="listArray">
<span>Test1</span>
<span>Test2</span>
<span>Test3</span>
</div>
<input type="text" class="form-control" id="userArray">
<input type="text" class="form-control" id="userArray2">
</body>
</html>
<script
$("#userArray, #userArray2").on('change keyup paste', function() {
var input = $(this).val().toLowerCase().split(" ");
$('#listArray span').each(function(){
$(this).removeClass('active');
if( $.inArray( $(this).text().toLowerCase(), input ) != -1 ) {
$(this).addClass('active');}});});
</script>
<style>#list_input > div { border:4px solid; padding: 1em; margin: 1em auto; }
#listArray { overflow: auto; }
#listArray span { display: block; float: left; clear: left; padding:4px; margin:1px; }
#listArray span.active { background: green; }
}
</style>
You can achieve the desired effect by removing the active class whenever the text changes and then checking against both inputs:
$("#userArray, #userArray2").on('change keyup paste', function() {
$('#listArray span').removeClass('active');
$('input').each(function() {
var input = $(this).val().toLowerCase().split(" ");
$('#listArray span').each(function() {
if ($.inArray($(this).text().toLowerCase(), input) != -1) {
$(this).addClass('active');
}
});
});
});
#list_input > div {
border: 4px solid;
padding: 1em;
margin: 1em auto;
}
#listArray {
overflow: auto;
}
#listArray span {
display: block;
float: left;
clear: left;
padding: 4px;
margin: 1px;
}
#listArray span.active {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="listArray">
<span>Test1</span>
<span>Test2</span>
<span>Test3</span>
</div>
<input type="text" class="form-control" id="userArray">
<input type="text" class="form-control" id="userArray2">
Try this code :
$("#userArray, #userArray2").on('change keyup paste', function() {
var input = $("input").map(function(){return $(this).val().toLowerCase();}).get();
$('#listArray span').each(function(){
if( $.inArray( $(this).text().toLowerCase(), input ) != -1 ) {
$(this).addClass('active');
}
else
$(this).removeClass('active');
});
});
Reason : In your code you are only getting single value at a time to compare, rather the both textbox's values !!!
I have the following code that make a simple line chart of price during the day
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Flot Line Graph</title>
<style type="text/css">
body { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
h4 { width: 450px; margin-left:200px; font-size: 12px; text-align: center; }
#placeholder { width: 450px; height: 200px; position: relative;}
.legend table, .legend > div { height: 50px !important; opacity: 1 !important; right: -55px; top: 10px; width: 80px !important; }
.legend table { border: 3px solid #555; padding: 5px; font-weight:800; }
.col-md-1{width:50px !important;;
padding:0px !important;;}
.col-md-4{padding: 0px !important;;}
form{font-weight: 800;}
</style>
<!--[if lte IE 8]><script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.symbol.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class = "col-md-1" style="width:100px; margin-left:100px; margin-top:40px">
<form>
<input id="price_cat" type="radio" name="price_val" value="0" checked> LMP<br>
<input id="price_cat" type="radio" name="price_val" value="1"> MLC<br>
<input id="price_cat" type="radio" name="price_val" value="2">MCC
</form>
</div>
<div class="col-md-4">
<h4 id ="title"></h4>
<div id="placeholder" style = "width:850px; height:450px"></div>
<h4>Hour</h4>
</div>
</div>
</body>
<script type="text/javascript">
//Rome, Italy
var mkt_data = $.getJSON('https://bc2.demo.socrata.com/resource/9kzc-t3jm.json', function(response) {
console.log(response);
});
$.when(mkt_data).then(function(data) {
var price_data = data
var collection = []
var lmp_c =[]
var mcc_c = []
var mlc_c = []
var series = []
data.forEach(function(a) {
var lmp_s = []
var mcc_s = []
var mlc_s = []
lmp_s.push(Number(a.hour.replace("HE","")),Number(a.lmp));
lmp_c.push(lmp_s);
mcc_s.push(Number(a.hour.replace("HE","")), Number(a.mcc));
mcc_c.push(mcc_s)
mlc_s.push(Number(a.hour.replace("HE","")), Number(a.mlc));
mlc_c.push(mlc_s)
})
series.push({label:"LMP", data: lmp_c},{label:"MLC", data: mlc_c},{label:"MCC", data: mcc_c})
console.log(series[0].label);
$("#title").html("Average LMP per hour of the Day Jan - June 2016")
$.plot($("#placeholder"), [series[0]], {xaxis: {
min:0,
max:24,
tickSize: [1]
},
legend: {
labelBoxBorderColor: "none",
position: "right"
},
series: {lines: { show: true },
points: {
radius: 3,
show: true,
fill: true
}
}
});
$("input:radio[name=price_val]").change(function(){
var price_series = Number($('input:radio[name=price_val]:checked').val());
console.log(price_series, typeof price_series);
$("#title").html("Average "+series[price_series].label+" per hour of the Day Jan - June 2016")
$.plot($("#placeholder").fadeIn(500), [series[price_series]], {xaxis: {
min:0,
max:24,
tickSize: [1]
},
legend: {
labelBoxBorderColor: "none",
position: "right"
},
series: {lines: { show: true },
points: {
radius: 3,
show: true,
fill: true
}
}
});
});
});
the chart work and so does the change listener but I can't get the fade in to work properly. I would usually attached it to the element selector but the flot libraries $.plot() function is making it unclear to me where I should put the call to fadeIn(). I just want to achieve a smoother transition when changing datasets. The fade in call is at line 114.
I have base tag in my html page, and there is links that actually references to this base url, but, when i want to put a url that not references to the base url- it's not working!!
the urls that not references to the base url is:
imageUrl: "images/like.png",
contentUrl: "controls/small-pie-chart.html"
this is the code:
<base href="http://demos.telerik.com/kendo-ui/tabstrip/right-to-left-support" >
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.metroblack.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css" />
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
<div id="example">
<div class="k-rtl">
<div class="demo-section k-content">
<div id="tabstrip-images"></div>
</div>
<script>
$("#tabstrip-images").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
},
dataTextField: "text",
dataImageUrlField: "imageUrl",
dataContentUrlField: "contentUrl",
dataSource: [
{
text: "נתונים כלליים",
imageUrl: "images/like.png",
contentUrl: "controls/small-pie-chart.html"
},
{
text: "מוכנות ביצוע",
imageUrl: "images/like.png",
contentUrl: "controls/small-pie-chart.html"
}
]
}).data("kendoTabStrip").select(0);
</script>
</div>
</div>
<style>
html,
body{
position: fixed;
height: 100%;
width:100%;
margin: 0;
padding: 0;
border-width: 0;
}
#tabstrip-parent,
#tabstrip {
margin: 0;
padding: 0;
border-width: 0; }
.k-tabstrip .k-content {
position: fixed;
height: 100%;
width:100%;
}
</style>
Try with "/" at end of base URL
<base href="http://demos.telerik.com/kendo-ui/tabstrip/right-to-left-support/" >