I am trying my first webix programm. I follow the get start document. As per the document I place my code in HTML page and two json file. Here is my complete code.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="../webix_v4.2.4_pro/codebase/webix.css" type="text/css">
<script src="../webix_v4.2.4_pro/codebase/webix.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#app_here {
width: 1000px;
height: 400px, margin: 200px;
}
</style>
</head>
<body>
<div id="app_here"></div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$.ajax({
url: "grid_data.json",
success: function(result) {
debugger;
}
});
});
$(document).ready(function() {
$.ajax({
url: "tree_data.json",
success: function(result) {
debugger;
}
});
});
webix.ready(function() {
webix.ui({
container: "app_here",
view: "layout",
rows: [{
type: "header",
template: "My App!"
}, {
cols: [{
view: "tree",
id: "mytree",
gravity: 0.3,
select: true,
data: tree_data
}, {
view: "resizer"
}, {
view: "datatable",
id: "mydatatable",
autoConfig: true,
data: grid_data
}]
}]
});
$$("mytree").open(1);
$$("mytree").open(2);
$$("mydatatable").select(1);
});
</script>
</body>
</html>
My page is loading but one error
Uncaught ReferenceError: tree_data is not defined
Also page is not oading. Am I missing anything in ajax or something. Can anybody please help me in this.
If you need I will place my json data also.
My tree_data.json
[
{ id: "1",
type: "folder",
value: "Music",
css:"folder_music",
data:[{
id : 6,
type: "folder",
value: "Music",
},{
id : 3,
type: "folder",
value: "Music",
},{
id : 4,
type: "folder",
value: "Music",
},{
id : 5,
type: "folder",
value: "Music",
}]
},{ id: "2",
type: "folder",
value: "Music",
css:"folder_music",
data:[{
id : 7,
type: "folder",
value: "Music",
},{
id : 8,
type: "folder",
value: "Music",
},{
id : 9,
type: "folder",
value: "Music",
},{
id : 10,
type: "folder",
value: "Music",
}]
}
]
My grid_data.json
[
{ id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1},
{ id:2, title:"The Godfather", year:1994, votes:678790, rating:9.2, rank:1},
{ id:3, title:"The Godfather part : 2", year:1994, votes:678790, rating:9.2, rank:1},
{ id:4, title:"The good, the bad and the Ugly ", year:1994, votes:678790, rating:9.2, rank:1},
{ id:5, title:"My Fair Lady", year:1994, votes:678790, rating:9.2, rank:1},
{ id:6, title:"12 Angery Man", year:1994, votes:678790, rating:9.2, rank:1}
]
I'm assuming tree_data is the json data you're trying to get with the ajax request. You need to return the data or store it somewhere for later use. In the code you have, you have not defined tree_data or grid_data. Try getting the data similar to how its done here:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css">
<script src="http://cdn.webix.com/edge/webix.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="app_here"></div>
<script type="text/javascript" charset="utf-8">
var gridData = (function() {
var grid_data;
$.ajax({
url: "grid_data.json",
success: function(result) {
grid_data = result;
console.log(grid_data);
}
});
return {
getData: function() {
if (grid_data) return grid_data;
}
}
})();
var treeData = (function() {
var tree_data;
$.ajax({
url: "tree_data.json",
success: function(result) {
tree_data = result;
console.log(tree_data);
}
});
return {
getData: function() {
if (tree_data) return tree_data;
}
}
})();
webix.ready(function() {
webix.ui({
container: "app_here",
view: "layout",
rows: [{
type: "header",
template: "My App!"
}, {
cols: [{
view: "tree",
id: "mytree",
gravity: 0.3,
select: true,
data: treeData.getData() // get your tree_data
}, {
view: "resizer"
}, {
view: "datatable",
id: "mydatatable",
autoConfig: true,
data: gridData.getData() // get your grid_data
}]
}]
});
$$("mytree").open(1);
$$("mytree").open(2);
$$("mydatatable").select(1);
});
</script>
</body>
</html>The JSON you have isn't loading because it isn't valid json; the keys need to be strings like this:
[{
"id": "1",
"type": "folder",
"value": "Music",
"css": "folder_music",
"data": [{
"id": 6,
"type": "folder",
"value": "Music"
}, {
"id": 3,
"type": "folder",
"value": "Music"
}, {
"id": 4,
"type": "folder",
"value": "Music"
}, {
"id": 5,
"type": "folder",
"value": "Music"
}]
}, {
"id": "2",
"type": "folder",
"value": "Music",
"css": "folder_music",
"data": [{
"id": 7,
"type": "folder",
"value": "Music"
}, {
"id": 8,
"type": "folder",
"value": "Music"
}, {
"id": 9,
"type": "folder",
"value": "Music"
}, {
"id": 10,
"type": "folder",
"value": "Music"
}]
}]
[{
"id": 1,
"title": "The Shawshank Redemption",
"year": 1994,
"votes": 678790,
"rating": 9.2,
"rank": 1
}, {
"id": 2,
"title": "The Godfather",
"year": 1994,
"votes": 678790,
"rating": 9.2,
"rank": 1
}, {
"id": 3,
"title": "The Godfather part : 2",
"year": 1994,
"votes": 678790,
"rating": 9.2,
"rank": 1
}, {
"id": 4,
"title": "The good, the bad and the Ugly ",
"year": 1994,
"votes": 678790,
"rating": 9.2,
"rank": 1
}, {
"id": 5,
"title": "My Fair Lady",
"year": 1994,
"votes": 678790,
"rating": 9.2,
"rank": 1
}, {
"id": 6,
"title": "12 Angery Man",
"year": 1994,
"votes": 678790,
"rating": 9.2,
"rank": 1
}]
If this isn't the solution for you the problem you should look into is making sure you get the data tree_data and grid_data into the scope of your webix.ready(). Hope this helps.
</div>