Part of my JS file that initialize bstreeview:
$.ajax({
url: window.location.origin + '/build-filter-values/',
method: 'GET',
dataType: "json",
success: function (data, textStatus, jqXHR) {
console.log(data)
$('#tree').bstreeview({
data: data
});
}
})
console.log(data) show an valid array :
[{text: "Calcareous nanofossils", id: "1", parent: "None", nodes:[{text: "Aggregates", id: "19", parent: "1", }]},{text: "Crinoids", id: "18", parent: "None", }]
I have an error:
Uncaught TypeError: Cannot create property 'nodeId' on string '['
On the other hand, what is strange is that when I set the array in a variable in another file and I build my treeview with this variable, it works, whereas it is strictly the same array...
//file mytree.js:
var tree = [{text: "Calcareous nanofossils", id: "1", parent: "None", nodes:[{text: "Aggregates", id: "19", parent: "1", }]},{text: "Crinoids", id: "18", parent: "None", }];
// another file js
$('#tree').bstreeview({
data: tree
});
SOLVED
The problem was in my back (python)
I tried to build my tree in a String instead of building an objects.
So I was trying to serialize a String instead of an object by doing:
return HttpResponse(json.dumps(tree))
tree
Related
I am practising my ajax with a json file on local computer, using google chrome. the json file is par of sources when I inspect the website but i keep getting a parsererror
hears my js code
$(function(){
$.ajax({
type: 'GET',
url: 'sample3.json',
dataType: 'jsonp',
crossDomain: true,
cache: false,
async: true,
jsonp: false,
success: function(data) {
console.log('success', data);
},
error:function(e, msg){
console.log('error')
console.log(JSON.stringify(e) + " " + msg);
}
})
})
I keep getting {"readyState":4,"status":200,"statusText":"load"} parsererror
my json file
[
{
"id": 1,
"name": "Will",
"drink": "Americano w/ Creme"
},
{
"id": 2,
"name": "Laura",
"drink": "Vanilla Macchiato"
}
]
to see what I am trying to create
https://jsfiddle.net/Anaconda2468642/rskfwucp/3/
and I am also getting this error:
error Error: myCallback was not called
at Function.error (jquery.min.js:2:2616)
at e.converters.script json (jquery.min.js:2:84147)
at jquery.min.js:2:79470
at l (jquery.min.js:2:79587)
at HTMLScriptElement.i (jquery.min.js:2:83436)
at HTMLScriptElement.dispatch (jquery.min.js:2:43064)
at HTMLScriptElement.v.handle (jquery.min.js:2:41048)
how can i format this object Object to its actual values ?
I want this json object to display its actual values in a specific kendo grid column .
Can someone please help me and teach me how to do it ?
This is the image of the kendo grid with the result ,
While here is the code that I am using in my view .
Can please someone help .
contact : new kendo.data.DataSource({
transport:{
read:{
type: "GET",
url:"reservation/list",
dataType:"json",
contentType: "application/json; chartset=utf-8"
},
update: {
url: "contacts/update",
dataType: "json",
type: "POST"
},
destroy: {
url: "contacts/destroy",
dataType: "json",
type:"POST"
},
create: {
url: "contacts/store",
dataType: "json",
type:"POST"
}
},
schema:{
model:{
id:"id",
fields:{
Purpose:
{
type:"string",
validation:{required:true}
},
RoomID:
{
from: "RoomID.room_name",
type: "string"
},
Equipments:
{
from: "Equipments",
type: "string"
},
start:
{
type:"date",
validation:{required:true}
},
end:
{
type:"date",
validation:{required:true}
},
}
}
},
pageSize:10
}),
init : function(e){
$("#grid").kendoGrid({
dataSource: this.contact,
selectable: true,
height:600,
editable: "popup",
filterable: true,
sortable: {
mode: "multiple",
allowUnsort: true,
showIndexes: true
},
toolbar: ["search"],
columns: [
{
field: "Purpose",
title:"Purpose"
},
{
field: "RoomID",
title:"Room",
},
{
field: "Equipments",
title:"Equipments",
},
{
field: "start",
title:"Start",
//template: '#= kendo.toString(kendo.parseDate(start), "MM/dd/yyyy HH:mm:ss")#'
format: "{0:MMM dd,yyyy hh:mm tt}",
parseFormats: ["yyyy-MM-dd'T'HH:mm.zz"]
},
{
field: "end",
title:"End",
//template: '#= kendo.toString(kendo.parseDate(end), "MM/dd/yyyy HH:mm:ss")#'
format: "{0:MMM dd,yyyy hh:mm tt}",
parseFormats: ["yyyy-MM-dd'T'HH:mm.zz"]
},
{
command: ["edit", "destroy"],
title: " ",
width: "250px"
}
],
pageable:{
pageSize:10,
refresh:true,
buttonCount:5,
messages:{
display:"{0}-{1}of{2}"
}
}
});
},
});
kendo.bind($("#whole"),model);
model.init();
Hopefully this will help you out with templating out the results.
https://dojo.telerik.com/ICOceLUj
In the example above I have created a custom column that takes the incoming row object and then parsed the name of the item and the category object into a single template.
To achieve this I have added the template property and used a function with an external template script to handle the manipulation. I personally find this easier to manage than trying to inline a complex client template (especially if you have logic involved)
So this is how we set it up initially:
{ title: "custom template", template:"#=customTemplate(data)#" }
obviously you will change it to the property you need to look at in your model.
then the function is a couple of lines of code:
function customTemplate(data){
var template = kendo.template($('#customTemplate').html());
var result = template(data);
return result;
}
so this takes the customTemplate template i have created for this and renders it as html and then it will apply the data where appropriate. The template looks like this:
<script id="customTemplate" type="text/x-kendo-template">
<div>
<h5> #:data.ProductName#</h5>
<h4>#: JSON.stringify(data.Category, null, 4) #</h4>
</div>
</script>
You can then customize this template to how you need it to look for your specific needs. You can then either create a source template for the items and then map the values back as single string or have the logic for this in the template. Which ever is most sensible in your case.
For more info on templating please look at this link:
https://docs.telerik.com/kendo-ui/framework/templates/overview
You can use kendo.stringify in your column template.
Example:
kendo.stringify(YourProperty)
I would like to implement a simple line graph with ajax in which only two points
x will be the hours and y will be the count of calls.
CODE :
<script>
function getData() {
$.ajax({
type:'POST',
url: "http://localhost/demo_chart/test.php",
dataType: 'JSON',
success: function(response_data) {
new_data = $.map(response_data, function(i){
return {x: i['date'],y: i['count']};
});
$('#container').highcharts({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Count vs. Time'
},
xAxis: {
title: {
text: 'Time'
},
type: 'Time',
},
yAxis: {
title: {
text: 'Count'
}
},
series: [{
name: 'Test',
data: new_data
}]
});
}
})
}
$(document).ready(function () {
getData();
})
</script>
Output of http://localhost/demo_chart/test.php is same as below :
{"date":["13:00:00","13:00:01","13:00:02","13:00:03","13:00:04"],"count":["1","2","3","4","2"]}
But still graph is not generating. So i would like to know what is the problem here.
Anyone like to share some hint which can resolve this problem ?
Expected output is :
X- axis : show all date
Y-axis : show count
You need to correct your mapping function, for example:
var response = {
"date": ["13:00:00", "13:00:01", "13:00:02", "13:00:03", "13:00:04"],
"count": ["1", "2", "3", "4", "2"]
};
new_data = $.map(response.date, function(el, index) {
return {
name: el,
y: parseInt(response['count'][index])
};
});
Additionally, with that data structure, I recommend you to use category axis type.
xAxis: {
...,
type: 'category'
}
Live demo: http://jsfiddle.net/BlackLabel/ptx6fy2q/
API Reference: https://api.highcharts.com/highcharts/xAxis.type
My kendo grid is not showing data after successfully calling a web method and seeing data being returned in the ajax request.
$(document).ready(function () {
var filterSource = new kendo.data.DataSource({
transport: {
read: function (options) {
$.ajax({
type: "GET",
url: "DoJo.aspx/GetProjects",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// msg.d has the json data
}
});
}
},
schema: {
model: {
fields: {
ProjNum: {type: "string"},
Stat: {type: "string"}
}
},
data: "d"
},
change: function (e) {
// e.items is empty
}
});
$("#grid").kendoGrid({
dataSource: filterSource,
columns: [
{
field: "ProjNum", title: "Project Number", width: "130px", filterable: {
multi: true,
dataSource: filterSource
}
},
{
field: "Stat", title: "Status", filterable: {
multi: true,
dataSource: filterSource
}
}
]
});
})
The JSON below is in an array format.
[{"ProjNum":"12345","Stat":null,"ProjTitle":"Test Title","ClientName":"Test Client","ClientContactName":"Test Name","ClientFacilityLocation":"Test Location","SourceOfContact":"Test Contact","ProjManager":"Test Manager","Department":"Test Department"}]
Why is change callback returning an empty e.items? If I remove data: "d" it returns e.Items with the JSON data.
When you set dataSource.transport.read to a function and invoke the ajax call yourself, you need to pass the result (or error) back into the dataSource, like so:
var filterSource = new kendo.data.DataSource({
transport: {
read: function (options) {
$.ajax({
type: "GET",
url: "DoJo.aspx/GetProjects",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// msg.d has the json data
// notify the data source that the request succeeded
options.success(msg);
},
error: function(msg) {
// notify the data source that the request failed
options.error(msg);
}
});
}
},
schema: {
model: {
fields: {
ProjNum: { type: "string" },
Stat: { type: "string" }
}
},
data: "d"
},
change: function (e) {
// e.items is empty
}
});
See the documentation for more information.
Can someone tell me what is wrong this code?
$.ajax({
"url":"https://en.wikipedia.org/w/api.php?",
"dataType": "jsonp",
"action": "opensearch",
"format": "json",
"search": "new york",
"namespace": "0",
"limit": "3",
"formatversion": "1",
success: function(response){
console.log(response);
}
});
Why do I get the following error message?
Refused to execute script from 'https://en.wikipedia.org/w/api.php?&callback=jQuery111105448874468459555_1518288921946&_=1518288921947' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
Thank you.
The following are not ajax parameters (instead they are api parameters):
"action": "opensearch",
"format": "json",
"search": "new york",
"namespace": "0",
"limit": "3",
"formatversion": "1",
You can pass those values as query string, changing your url from:
"url":"https://en.wikipedia.org/w/api.php?",
to:
"url":"https://en.wikipedia.org/w/api.php?"+ $.param(apiParams),
where the api parameter is:
var apiParams = {action: 'opensearch', search: 'new york', limit: 3, namespace: 0, formatversion: 1, format: 'json'};
or you can use the data parameter like:
data: apiParams,
The snippet:
var apiParams = {action: 'opensearch', search: 'new york', limit: 3, namespace: 0, formatversion: 1, format: 'json'};
$.ajax({
"url":"https://en.wikipedia.org/w/api.php?" + $.param(apiParams),
"dataType": "jsonp",
//data: apiParams,
success: function(response){
console.log(JSON.stringify(response));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>