Ajax is not working in Webix

Question

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}
]

score 3 · Accepted Answer · edited May 23 '17 at 12:25

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:

tree_data

[{
  "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"
  }]
}]

grid_data

[{
  "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.

@Jonthan When I am checking in network these url which passed in ajax itself is not loading. therefore I am getting error like "Uncaught TypeError: treeData.getData is not a function" — shanky singh, Mar 03 '17 at 05:51
@shankysingh I updated the code I had a few typos in the last one, but whats the path to your `tree_data.json` ?? — Jonathan Portorreal, Mar 03 '17 at 06:03
Thanks a ton. Now url is fetching in ajax. Grid is not loading but I will check whats cause that. I will accept this in sometime. — shanky singh, Mar 03 '17 at 06:19
@Jonthan `tree_data.json` is in same folder where I place index.html — shanky singh, Mar 03 '17 at 06:33
@shankysingh can you add the json you're working with ? If you're running this on a server `tree_data.json` should load, the new issue should be with `webix` and what you're trying to accomplish with the `tree_data.json` data — Jonathan Portorreal, Mar 03 '17 at 06:57
I update my question. funny is when i am declear this in variable things are working. when loading by this method i am getting `Uncaught TypeError: Cannot read property '$count' of undefined` error — shanky singh, Mar 03 '17 at 07:10
@shankysingh you had invalid `json` to start with, if you use update your `json` to how I mentioned in my answer you'll see the data you want is there . Just `console.log` it in the `ajax` call so you can see that you have it. Now whatever it is that you want to do with that data that's another question entirely. — Jonathan Portorreal, Mar 03 '17 at 07:36
Thanks a ton Jonthan. I know these are silly mistakes, but i make sure i come over from these mistakes. Thanks!! working — shanky singh, Mar 03 '17 at 07:44

Ajax is not working in Webix

1 Answers1

tree_data

grid_data