I am using bootstrap treeview plugin (https://github.com/jonmiles/bootstrap-treeview). I am not sure if this is an issue with treeview plugin or the way i am implementing the code.I am trying to load the treeview using data from ajax call back. Here is the code sample that i am using:
<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">
<title>Bootstrap 101 Template</title>
<!-- Required Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="~/Content/BootStrap/bootstrap-treeview.js"></script>
</head>
<body>
<div class="clear-fix"> </div>
<div class="row">
<div class="col-sm-2"><div id="lstCollections">This will display my list of all collections</div></div>
</div>
</body>
</html>
<script type="text/javascript">
function getTree(handleData) {
$.ajax({
type: "GET",
url: '#Url.Action("Get","DatabaseSchema")',
dataType: 'json',
success: function (response) {
handleData(response);
}
});
}
$(document).ready(function () {
getTree(function (output) {
var collectionTree = [];
output.forEach(function (a) {
collectionTree.push({ text: a });
});
//var tree2 = [{ text: "Buyer" }, {text: "text1" }, { text: "text2" }, { text: "text3" }];
$('#lstCollections').treeview({ data: collectionTree });
});
})
</script>
When I run the code, I don't see any data in my treeview. In my developer tool(for chrome browser), in console I see "Uncaught TypeError: $(...).treeview is not a function(…)" error on line " $('#lstCollections').treeview({ data: collectionTree });"
If i replace $('#lstCollections').treeview({ data: collectionTree });with $('#lstCollections').treeview({ data: tree2}); (where tree2 is a variable that i have declared inside document.ready function, I still get the same error.
Interestingly, If i populate the treeview using following call outside of ajax call back function :
function nonAjax() {
var tree = [{ text: "Buyer" }, { text: "text1" }, { text: "text2" }, { text: "text3" }];
return tree;
}
$('#lstCollections').treeview({` data: nonAjax() });
Everything works!!
I am not sure why I am gettig treeview is not function() when the call is inside ajax callback function.
The right format that should pass to the treeview isn't what you get back from the Ajax call you should parse the json object like the following example:
let invalid = '{ "bank": "CityBank", "sum": "500" }, { "bank": "WPBank", "sum": "700" }';
let valid = JSON.parse("[" + invalid + "]");
Now you can pass the valid variable to the treeView without any problems.
It all about adding square brackets notation to the JSON object!
Related
I'm trying to load a local file to MapBox getting error messages:
ERROR parsererror No conversion from text to geojson from ajax function and
Error {message: "Input data is not a valid GeoJSON object."} for evented.js
Features are structured are like this:
{ "type": "Feature", "properties": { "score": 0.77, "pokemon": "Squirtle", "color": "#42b9f5" }, "geometry": { "type": "Point", "coordinates": [ 2.768403197476528, 39.806888683241638 ] } }
I'm creating geoJSON file with Python, http://geojson.io load it just fine without any errors I suppose is something about my Ajax request.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css' rel='stylesheet' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'MY_TOKEN';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11'
});
map.on('style.load', function() {
map.addSource("pokemons", {
type: "geojson",
data:
$.ajax({
type: "GET",
file: "../data_wrangling/points.geojson",
dataType: "geojson",
success: function(data) {
return data;
},
error: function(jqXHR, textStatus, errorThrown) {
console.log('ERROR', textStatus, errorThrown);
}
})
})
})
</script>
You're passing an ajax object to as your data which is not supported. Try to fetch the data first before passing it in .addSource. This demo may be helpful.
Alternatively, since your geojson is stored at an URL, you can pass that url instead of the ajax object/promise.
I have implemented kendo grid in my project. I want to show "No Records Available" message to grid if data is not present. I set noRecords to true for my grid and it is working as expected. Now I have so many grids in my project so I want to globally set this setting for all the grids.
Is there a way to achieve so?
Here is my sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>
</head>
<body>
First Grid:
<div id="grid"></div>
Second Grid:
<div id="grid1"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
pageable: true,
noRecords: {
template: "No data available"
},
dataSource: {
page: 1,
pageSize: 10
}
});
$("#grid1").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
pageable: true,
dataSource: {
page: 1,
pageSize: 10
}
});
</script>
</body>
</html>
You can find a working dojo here.
Hi you can extend the grid like this. You can put this in a separate js file and include it before you use a grid.
(function ($, kendo) {
var _init = kendo.ui.Grid.fn.init;
var extendedGrid = kendo.ui.Grid.extend({
init: function (element, options) {
var getTemplate = function (textP, iconP) {
var icon = iconP || 'icon';
var text = textP || 'No data available';
var tpl = `<div class="no-records-table"><div class="no-records-table-cell"><div class="grid-no-records-icon ${icon}"></div><div>${text}</div></div></div>`;
return tpl;
}
options = $.extend({
noRecords: {
template: getTemplate(options.noRecordsText, options.noRecordsIcon)
}
}, options);
//call the base constructor.
_init.call(this, element, options);
}
});
kendo.ui.plugin(extendedGrid);
}(window.kendo.jQuery, window.kendo));
You can check the the dojo here
To get row information of currently selected row we can do this
var current = e.sender.dataItem(e.sender.select());
But how to get the same when i click on Edit button?
I tried $("#grid").data("kendoGrid").dataItem($(e.sender).closest("tr")); it didnt work.
EDIT
I tried ways as suggested on the answers below, but its still giving me null.
in the screenshot the commented code doesn't work either
COMPLETE CODE
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/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/2016.3.914/js/kendo.all.min.js"></script>-->
<!--<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>-->
<script src="Scripts/KendoUI.js" type="text/javascript">
</head>
<body>
<div id="grid">
</div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "id" },
{ field: "name" },
{ field: "age" },
{ command: "edit" },
{ command: "list" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema: {
model: {
id: "id",
fields: {
"id": { type: "number" }
}
}
}
},
editable: "popup",
toolbar: ["create"],
dataBound: function (e) {
//<input name="age" class="k-input k-textbox" type="text" data-bind="value:age">
},
edit: function (e) {
//This currentItem is null :(
var currentItem = $("#grid").data("kendoGrid").dataItem($(e.sender).closest("tr"));
if (!e.model.isNew()) {
$('.k-window-title').text("Newton Sheikh");
}
}
});
</script>
</body>
</html>
If you use the edit function in the grid, you can access the data item attributes which is in edit mode using:
var grid = $("#yourGrid").kendoGrid({
dataSource: yourGridDatasource,
...
edit: function (e) {
var attribute = e.sender.dataItem(e.container).attributeName;
// or simply
var attribute2 = e.model.attributeName;
}
});
You should use e.container instead of e.sender, like this:
$("#grid").data("kendoGrid").dataItem($(e.container).closest("tr"))
Update to make it work with a popup
If you are using a popup editor, then the container will be the popup itself and the above will not work.
In that case, you can use the uid of the row to locate it within the table:
var row = $("#grid").data("kendoGrid").tbody.find("tr[data-uid='" + e.model.uid + "']");
If you do not need a reference to the actual row, but only the data item, then you can simply use e.model. I have created a dojo with your code and if you check the console after you click "edit", you will see that there is no difference: http://dojo.telerik.com/iqAPO
var gridDataById= $("#grid").data("kendoGrid");
//Getting selected row
var selectedRow = gridDataById.dataItem(gridDataById.select());
console.log(selectedRow);
My _Layout.cshtml like this
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - E-Reader Statistics</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#* #Scripts.Render("~/bundles/jquery")*#
<link href="~/jqGrid/css/ui.jqgrid.css" rel="stylesheet" />
<script src="~/jqGrid/js/i18n/grid.locale-en.js"></script>
<script src="~/jqGrid/js/jquery-1.9.0.min.js"></script>
<script src="~/jqGrid/js/jquery.jqGrid.min.js"></script>
<script src="~/jqGrid/js/jquery.jqGrid.src.js"></script>
</head>
in Index.chtml
#model List<LSStatisticalReport.ViewModels.GSViewModel>
#{
ViewBag.Title = "Index";
}
#*<h2>General Statistics</h2>*#
<script type="text/javascript">
// var jq = $.noConflict();
$(document).ready(function () {
var genStatGrid = $('#list');
genStatGrid.jqGrid({
caption: "General Statistics",
url: '/Statistics/GetRecords/',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'POST',
colNames: ['Student', 'Teacher', 'Date'],
colModel: [
{ name: 'studentDesignation' },
{ name: 'teacherDesignation' },
{ name: 'dateLength' },
],
rowNum: 5
});
});
</script>
But when I am running the project I am getting an error in console:
"Uncaught TypeError: Object [object Object] has no method 'jqGrid' "
This type of error says this : please Define jqgrid library before related init scripts. I have seen this error before, although you have defined related library in head tag. So I solved this problem by removing its library from head tag and placing it at the view before the script and works properly.
I think this occurs because of partial load of page. so use this at the index view:
#model List<LSStatisticalReport.ViewModels.GSViewModel>
#{
ViewBag.Title = "Index";
}
#*<h2>General Statistics</h2>*#
//added
<script src="~/jqGrid/js/jquery.jqGrid.min.js"></script>
<script src="~/jqGrid/js/jquery.jqGrid.src.js"></script>
//end added
<script type="text/javascript">
// var jq = $.noConflict();
$(document).ready(function () {
var genStatGrid = $('#list');
genStatGrid.jqGrid({
caption: "General Statistics",
url: '/Statistics/GetRecords/',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'POST',
colNames: ['Student', 'Teacher', 'Date'],
colModel: [
{ name: 'studentDesignation' },
{ name: 'teacherDesignation' },
{ name: 'dateLength' },
],
rowNum: 5
});
});
</script>
Here is my jsonp feed: http://www.letheatredelorient.fr/saison/data.jsonp (JSONLint valid)
Here is my getJSON script:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$.getJSON("http://www.letheatredelorient.fr/saison/data.jsonp?callback=", function (data) {
$.each(data.Items, function (i, node) {
var title = node.titre;
$("#myTitle").html(title);
});
});
});
</script>
</head>
<body>
<div id="myTitle"></div>
</body>
</html>
It's really simple. But, it gets the feed, but it doesn't parse it. Any ideas?
Try this:
var title = node.node.titre;
In your code the node is the Item object, the node is in that, is this a little clearer?
$.getJSON("http://www.letheatredelorient.fr/saison/data.jsonp?callback=", function (data) {
$.each(data.Items, function (i, item) {
//For each item in Items
var title = item.node.titre;
$("#myTitle").html(title);
});
});
This is your json, I've added comments, you're looping through items which contain node:
{
"Items": [
-item{
"node": {
"titre": "La Faculté",
"image": "http://www.letheatredelorient.fr/sites/default/files/imagecache/130/saison/spectacles/faculte/photos/faculte-web2calainfonteray.jpg"
}
},
-item{
"node": {
"titre": "Nouveau Roman",
"image": "http://www.letheatredelorient.fr/sites/default/files/imagecache/130/saison/spectacles/nouveau-roman/photos/1210-nouveauroman-04cjeanlouisfernandez.jpg"
}
}
]
}