weixin_33730836 2017-03-03 04:32 采纳率: 0%
浏览 46

Ajax在Webix中不起作用

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}
]
  • 写回答

1条回答 默认 最新

  • 谁还没个明天 2017-03-03 05:34
    关注

    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.

    </div>
    评论

报告相同问题？

悬赏问题

  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥15 stable diffusion
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题：求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 关于#windows#的问题：怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘
  • ¥15 perl MISA分析p3_in脚本出错
  • ¥15 k8s部署jupyterlab，jupyterlab保存不了文件
  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿