pythonflaskwebix

Using webix with flask


I am trying to understand the webix framework and use it with my flask application. All the documentation deals with either static data in the html file or php examples.

A simple html file to populate a datatable looks like this (according to the documentation

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../static/css/webix.css" type="text/css" charset="utf-8">
    <script src="../static/js/webix.js" type="text/javascript" charset="utf-8"></script>
    <title>Webix Test 4</title>
</head>
<body>
    <script>
      webix.ui({
          id:"dtable",
          view:"datatable",
          url:"/gettabledata"
      });
    </script>
</body>
</html>

In my flask router I have done the following (from a tutorial) :-

peopleData = {'data':[
    {'title': "01. Basique", 'duration': "3:38"},
    {'title': "02. Moon", 'duration': "3:47"},
    {'title': "03. Unsaid", 'duration': "3:48"},
    {'title': "04. Eitheror", 'duration': "5:45"},
    {'title': "05. Above the Clouds", 'duration': "3:50"}]}
return jsonify(peopleData)

The web page shows nothing.

I have a similar problem trying to understand how to load variables (such as a page title) using python and flask.

Clearly I am missing something fundamental in how webix works with python/flask. (Pages with embedded data work ok, no problems)


Solution

  • first you need to try it without using Flask

    index.html

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css" charset="utf-8">
        <script src="http://cdn.webix.com/edge/webix.js" type="text/javascript" charset="utf-8"></script>
        <title>Webix Test 4</title>
    </head>
    <body>
        <script>
    webix.ui({
        rows: [{
            view: "template",
            type: "header",
            template: "My App!"
            }, {
                view: "datatable",
                autoConfig: true,
                editable: true,
                data: [
            {'title': "01. Basique", 'duration': "3:38"},
            {'title': "02. Moon", 'duration': "3:47"},
            {'title': "03. Unsaid", 'duration': "3:48"},
            {'title': "04. Eitheror", 'duration': "5:45"},
            {'title': "05. Above the Clouds", 'duration': "3:50"}]
            }]
        });
        </script>
    </body>
    </html>
    

    python3 -m http.server 9004

    jsfiddle

    then try it with Flask

    <script>
    var my_data =  webix.ajax().get("http://localhost:9004/my_route");
    webix.ui({
        rows: [{
            view: "template",
            type: "header",
            template: "My App!"
            }, {
                view: "datatable",
                autoConfig: true,
                editable: true,
                data: my_data
            }]
        });
        </script>