Ajax не работает в Webix

Я пробую свою первую программу webix. Я следую документу о начале работы. В соответствии с документом я помещаю свой код на HTML-страницу и два файла json. Вот мой полный код.

<!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>

Моя страница загружается, но одна ошибка

Uncaught ReferenceError: tree_data не определен

Также страница не грузится. Я что-то пропустил в ajax или что-то в этом роде. Может ли кто-нибудь помочь мне в этом.

Если вам нужно, я также размещу свои данные json.

Мой файл 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", 
        }]
 }
]

Мой 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}
]

javascript json jquery ajax webix
person shanky singh    schedule 03.03.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я предполагаю, что tree_data — это данные json, которые вы пытаетесь получить с помощью запроса ajax. Вам нужно вернуть данные или сохранить их где-нибудь для последующего использования. В коде, который у вас есть, вы не определили tree_data или grid_data. Попробуйте получить данные, подобные тому, как это делается здесь:

<!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>

Ваш JSON не загружается, потому что он недействителен 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"
  }]
}]

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

Если это не решение для вас, проблема, которую вы должны изучить, заключается в том, чтобы убедиться, что вы получаете данные tree_data и grid_data в область вашего webix.ready(). Надеюсь это поможет.

person Jonathan Portorreal    schedule 03.03.2017
comment
@Jonthan Когда я проверяю сеть, эти URL-адреса, переданные в самом ajax, не загружаются. поэтому я получаю сообщение об ошибке типа Uncaught TypeError: treeData.getData не является функцией - person shanky singh; 03.03.2017
comment
@shankysingh Я обновил код, в последнем было несколько опечаток, но каков путь к вашему tree_data.json ?? - person Jonathan Portorreal; 03.03.2017
comment
Благодаря тонну. Теперь URL загружается в ajax. Сетка не загружается, но я проверю, в чем причина. Я приму это когда-нибудь. - person shanky singh; 03.03.2017
comment
@Jonthan tree_data.json находится в той же папке, где я размещаю index.html - person shanky singh; 03.03.2017
comment
Не знаю, почему-то данные не загружаются. - person shanky singh; 03.03.2017
comment
@shankysingh, можете ли вы добавить json, с которым вы работаете? Если вы запускаете это на сервере, который tree_data.json должен загружаться, новая проблема должна быть связана с webix и с тем, что вы пытаетесь выполнить с данными tree_data.json. - person Jonathan Portorreal; 03.03.2017
comment
Я обновляю свой вопрос. забавно, когда я объявляю это переменным, все работает. при загрузке этим методом получаю Uncaught TypeError: Cannot read property '$count' of undefined ошибку - person shanky singh; 03.03.2017
comment
@shankysingh у вас был недействительный json для начала, если вы используете обновление json до того, как я упомянул в своем ответе, вы увидите, что нужные вам данные есть. Просто console.log это в ajax вызове, чтобы вы могли видеть, что он у вас есть. Теперь, что бы вы ни хотели делать с этими данными, это совершенно другой вопрос. - person Jonathan Portorreal; 03.03.2017
comment
Большое спасибо, Джонтан. Я знаю, что это глупые ошибки, но я уверен, что исхожу из этих ошибок. Спасибо!! работающий - person shanky singh; 03.03.2017