Im using the Jon Miles treeview from https://github.com/jonmiles/bootstrap-treeview
I have generated a JSON data structure and the treeview displays nicely, however I cannot make the onNodeSelected event fire.
JS:
<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/bootstrap-treeview.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script>
$(function () {
var defaultData = #Html.Raw(broadcaster.GetTreeViewData()); //Getting data from C# data structure
$('#tree').treeview({
color: "#428bca",
data: defaultData,
levels: 2
});
});
$('#tree').treeview({
onNodeSelected: function(event, data) {
alert('selected:')
}});
</script>
HTML:
<li>
<div id="tree"></div>
</li>
edit:
also tried the jQuery on()but no luck - nothing happens.
$('#tree').on('nodeSelected', function(event, data) {
alert('selected:')
you are initializing nodes 2 times..
it should be like this...
$(function () {
var defaultData = #Html.Raw(broadcaster.GetTreeViewData()); //Getting data from C# data structure
$('#tree').treeview({
color: "#428bca",
data: defaultData,
levels: 2,
onNodeSelected: function(event, data) {
alert('selected:')
}
});
});
Related
I created a dummy JSON file below to test out whether this html page works. How do I load the data via ajax request? The only error I got is
Uncaught ReferenceError: data is not defined.
How do I call this JSON file in my html page? Been trying but to no avail. Got this from view-source if it helps
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Matter Timeline</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<!-- load handlebars for templating, and create a template -->
<script src="dist/handlebars-v4.0.11.js"></script>
<script id="item-template" type="text/x-handlebars-template">
{{target}}
<font color="#229954"><b>{{status_green}}</b></font>
<font color="#A93226"><b>{{status_red}}</b></font>
<br/>
<font size="2" color="#2874A6">{{action}}</font>
<font size="2" color="#2874A6"><i>{{user}}</i></font> <br/>
<span class="tooltip-date">{{datetime}}</span>
</script>
<script src="dist/vis.js"></script>
<link href="dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<script>
function resettimeline() {
document.location.reload();
};
</script>
</head>
<body>
<p>
<center><h2>Matter Timeline</h2></center>
</p>
<div id="visualization"></div>
<script type="text/javascript">
var groups = new vis.DataSet([
{id: 0, content: 'Process/Task', value: 1},
{id: 1, content: 'Req/Matter/Doc', value: 2}
]);
var source = document.getElementById('item-template').innerHTML;
var template = Handlebars.compile(document.getElementById('item-template').innerHTML);
$.ajax({
url: 'http://127.0.0.1:8887/data.json',
dataType: "json",
success: function(data) {
//handle you data here
}
});
// create visualization
var container = document.getElementById('visualization');
var options = {
// option groupOrder can be a property name or a sort function
// the sort function must compare two groups and return a value
// > 0 when a > b
// < 0 when a < b
// 0 when a == b
groupOrder: function (a, b) {
return a.value - b.value;
},
orientation: {
axis: 'top',
item: 'top'
},
height: "85vh",
template: template
//timeAxis: {scale: 'day', step:3}
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(data);
timeline.on('doubleClick', function (properties) {
window.open('the_doc_url',
'newwindow',
'width=1000,height=600');
return false;
});
</script>
<br/>
Fit to Width
</body>
</html>
data.json
{
"data": [
{
id: 1, group: 0,
target: 'Request',
action: 'from',
user: 'SAS',
datetime: '7/10',
title: '<span class="tooltip-date">Date: 7/10/2017 09:00</span><br/>Req ID: R123',
start: new Date(2017,9,7, 9,0,0,0)
},
{
id: 2, group: 0,
target: 'Request',
action: 'by',
user: 'Alice',
datetime: '8/10',
title: '<span class="tooltip-date">Date: 8/10/2017 13:34</span><br/>Req ID: R123',
start: new Date(2017,9,8, 12,30,0,0)
}
]
}
AJAX means "Asynchronous JavaScript And XML", and it seems that you missed the asynch part. The code that is using the "data" variable is outside the callback, then this variable doesn't exist (or its value is undefined).
You need to use the json data after receiving it, something like this (it could probably be cleanup a little bit):
$.ajax({
url: 'http://127.0.0.1:8887/data.json',
dataType: "json",
success: function(data) {
//handle you data here
// create visualization
var container = document.getElementById('visualization');
var options = {
// option groupOrder can be a property name or a sort function
// the sort function must compare two groups and return a value
// > 0 when a > b
// < 0 when a < b
// 0 when a == b
groupOrder: function (a, b) {
return a.value - b.value;
},
orientation: {
axis: 'top',
item: 'top'
},
height: "85vh",
template: template
//timeAxis: {scale: 'day', step:3}
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(data.data);
timeline.on('doubleClick', function (properties) {
window.open('the_doc_url',
'newwindow',
'width=1000,height=600');
return false;
});
}
});
I am trying to merge two JSON file and using it in autocompleteplugin.
But I do get an error TypeError: $(...).easyAutocomplete is not a function even I have added js library for both auto complete and jquery.
My code look like this:
<script src="jquery-3.1.0.js"></script>
<link href="easy-autocomplete.min.css" rel="stylesheet" />
<script src="jquery.easy-autocomplete.min.js"></script>
<script>
$.getJSON("file1.json", function (data1) {
$.getJSON("file2.json", function (data2) {
var final = $.extend({}, data1, data2);
var options = {
data: final,
getValue: "name",
list: {
match: {
enabled: true
}
},
theme: "square"
};
$("#KUNDE").easyAutocomplete(options); $('div.easy-autocomplete').removeAttr('style');
});
});
</script>
I made a working example based on your code.
Please check you have the correct paths when you include the script files. And also check if jQuery is included.
Hope will help you:
$.getJSON("https://api.myjson.com/bins/42jd0", function (data1) {
$.getJSON("https://api.myjson.com/bins/5bjqc", function (data2) {
var final = [];
final.push(data1.employees1);
final.push(data2.employees2);
var new_final = final[0].concat(final[1]);
var options = {
data: new_final,
getValue: "firstName",
list: {
match: {
enabled: true
}
},
theme: "square"
};
$("#KUNDE").easyAutocomplete(options); $('div.easy-autocomplete').removeAttr('style');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js"></script>
<div class='easy-autocomplete'>
<input id="KUNDE"/>
</div>
You can run the code here by hitting the Run code snippet button or you can also check the jsfiddle I've made here.
UPDATE: Here is a link to reproduce the problem
RELATED: This is another question of mine where similar problems are happening with Kendo UI Map, maybe it could help someone figure this one out! It has one failing and one working version.
I use Kendo UI's DataSource, DropDownList and Map in an Angular single-page application.
I want to use the same DataSource object for both the DropDownList and the Map. However, the Map behaves in a very unpredictable manner.
When I put the DropDownList before the Map in the template, only the DropDownList gets populated. Inspecting the network traffic reveals that indeed only one request is being made. When I put the Map first, both of them get populated and two requests are made.
When I don't use any promises in transport.read, but just call options.success immediately with a static value, everything works as expected. Two calls are being made.
I've been pulling my hair over this the entire work day, so any help is highly appreciated.
The data source service:
m.factory('ourDataSource', function(foo, bar, baz) {
return new kendo.data.DataSource({
transport: {
read: function(options) {
foo().then(function (result) {
return bar(result);
}).then(function (result) {
return baz(result);
}).then(function (result) {
options.success(result);
}).catch(function (err) {
options.error(err);
});
}
}
});
});
The controller:
m.controller('ourController', ['ourDataSource', function(ourDataSource) {
// set the data source of the dropdownlist
this.ourDataSource = ourDataSource;
// set up the map layers
this.mapLayers = [{
type: 'tile',
urlTemplate: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/#= zoom #/#= y #/#= x #',
}, {
type: 'marker',
dataSource: ourDataSource, // the same data source as before
locationField: 'Position',
titleField: 'Title'
}];
}]);
The view:
<div ng-controller="ourController as ctrl">
<select kendo-drop-down-list
k-data-text-field="'Title'"
k-data-value-field="'Title'"
k-data-source="ctrl.ourDataSource"></select>
<div kendo-map
k-zoom="2"
k-center="[1, 1]"
k-layers="ctrl.mapLayers">
</div>
</div>
What am I missing here?
I believe that this might be a bug in the Kendo UI Map widget, since the behavior occurring here isn't at all what one would expect. However, I do have a workaround solution. Rather than return the data source as a singleton object, return it as a function. This is probably not ideal, but it works.
angular.module('ourModule', ['kendo.directives'])
.factory('getDataSource', function ($q) {
return function() { // return a function that creates a new data source
return new kendo.data.DataSource({
transport: {
read: function (options) {
$q.when([
{Position: [1, 1], Title: 'First place'},
{Position: [10, 10], Title: 'Second place'}
]).then(function (result) {
options.success(result);
});
}
}
});
};
})
.controller('ourController', function (getDataSource) {
this.ourDataSource = getDataSource();
this.mapLayers = [{
type: 'tile',
urlTemplate: '...removed for brevity...'
}, {
type: 'marker',
dataSource: getDataSource(),
locationField: 'Position',
titleField: 'Title'
}];
});
Factory mostly used to create instances on demand. See this example
var app = angular.module('ourModule', ['kendo.directives']);
app.factory('dataSourceFactory', function($q) {
function dataSourceFactory() {}
dataSourceFactory.prototype = {
contentTypes: function() {
return new kendo.data.DataSource({
transport: {
read: function(options) {
$q.when(
[{
Position: [1, 1],
Title: 'First place'
}, {
Position: [10, 10],
Title: 'Second place'
}])
.then(function(result) {
options.success(result);
});
}
}
})
}
};
return dataSourceFactory;
});
app.controller('ourController', ['$scope', 'dataSourceFactory',
function($scope, dataSourceFactory) {
var dataSourceFactory = new dataSourceFactory();
$scope.mapLayers = [{
type: 'tile',
urlTemplate: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/#= zoom #/#= y #/#= x #',
}, {
type: 'marker',
dataSource: dataSourceFactory.contentTypes(), // the same data source as before
locationField: 'Position',
titleField: 'Title'
}];
$scope.ourDataSource = dataSourceFactory.contentTypes();
}
]);
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
<div ng-app="ourModule">
<div ng-controller="ourController">
<kendo-drop-down-list k-data-source="ourDataSource"
k-data-text-field="'Title'"
k-data-value-field="'Title'">
</kendo-drop-down-list>
<kendo-map k-zoom="2"
k-layers="mapLayers">
</kendo-map>
</div>
</div>
See this JSFiddle demo
I am trying to generate an html table based on a Rest web service call using React. Only table header was displayed. The table rows are blank. If I debug it, after line
tableModel.rows = this.state.rows;
tableModel.rows was 'undefined'.
I counldn't figure out what's the issue.
<!DOCTYPE html>
<html>
<head>
<title>React Flux</title>
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="container" style="color:red"></div>
<script type="text/jsx">
var tableModel = {
cols: ["id", "name"],
rows: [],
}
var Table = React.createClass({
getInitialState: function () {
return {text: ''};
},
componentDidMount: function(){
$.ajax({
url: "http://localhost:8080/rest/user/findAll"
}).then(function(data) {
this.setState({
rows: data});
}.bind(this))
},
render: function() {
tableModel.rows = this.state.rows;
var _self = this;
var thead = React.DOM.thead({},
React.DOM.tr({},
this.props.cols.map(function (col) {
return React.DOM.th({}, col);
})));
var tbody = this.props.rows.map(function (row) {
return React.DOM.tr({},
_self.props.cols.map(function (col) {
return React.DOM.td({}, row[col] || "");
}));
});
return React.DOM.table({}, [thead, tbody]);
}
});
React.render(<Table cols={tableModel.cols} rows={tableModel.rows} />, container);
</script>
</body>
</html>
When your Table setState, it's render function will be recall, but why do you think it's props would be repopulate? It stay the same, mean Table this.props.rows === []. You could fix it by put the tableModel into Table state and using this.state instead of this.props, or wrap another class to Table to manage data fetching and populate data to Table class.
Background: With some help (#korchev) I was able to figure out how to use JSONP to bind data to a template. (see this and this question). However, I wanted to be able to make the data displayed in a kendo UI Mobile List view as mentioned in the Kendo Docs.
Unfortunately, the mobile-list view example, uses arrays of data coded in the html which is unlike jsonp.
Also, I notice that the official mobile list-view example leaves this out : <script type="text/x-kendo-template" id="template">. And that is a problem because my code relies on that implementation.
Summary: I am new to the kendo UI mobile framework, and I don't understand how to use my existing code to yield a mobile list view. Sometimes I find the documentation confusing, and I would please like somebody to assist.
My code:
<div id="products"></div>
<script type="text/x-kendo-template" id="template">
<div class="product">
<p>#:title#</p>
<p>#:content#</p>
<p>#= author.slug #</p>
</div>
</script>
<script>
$(function() {
var template = kendo.template($("#template").html());
var dataSource = new kendo.data.DataSource({
schema: {
data: function(response) {
return [response.post];
}
},
transport: {
read: {
url: "http://www.techhelix.com/?json=get_post&id=1/",
dataType: "jsonp"
}
},
requestStart: function() {
kendo.ui.progress($("#products"), true);
},
requestEnd: function() {
kendo.ui.progress($("#products"), false);
console.log(JSON.stringify(dataSource, null, 4));
},
change: function() {
$("#products").html(kendo.render(template, this.view()));
}
});
dataSource.read();
});
</script>
Daniel, I would first start out with the Kendo Mobile List View example and get that working.
Once that works, you can do the following to bind to your datasource and template.
function mobileListViewDataBindInitGrouped() {
...Code for getting your dataSource here...
$("#products").kendoMobileListView({
dataSource: dataSource,
template: kendo.template($("#template").html()),
fixedHeaders: true
});
}
You just need to bind the list view to your data source. Here is a quick example:
<div data-role="view">
<ul data-role="listview"
data-source="myDataSource"
data-template="template"></ul>
<script type="text/x-kendo-template" id="template">
<div class="product">
<p>#:title#</p>
<p>#=content#</p>
<p>#= author.slug #</p>
</div>
</script>
</div>
<script>
var myDataSource = new kendo.data.DataSource({
schema: {
data: function(response) {
return [response.post];
}
},
transport: {
read: {
url: "http://www.techhelix.com/?json=get_post&id=1/",
dataType: "jsonp"
}
}
});
var application = new kendo.mobile.Application();
</script>
Also available live: http://jsbin.com/nisuzapu/1/edit