Forums

Hi! I can't get handsontable to work with web2py. I was informed that the web2py plugin is outdated so I gave up with that and tried with the actual version. Not knowing how to install it to python anywhere (and not even wanting to go through the hassle) I decided to go with the "cloud" version. So I did like in this tutorial: http://docs.handsontable.com/0.17.0/tutorial-quick-start.html?_ga=1.129137742.377547658.1440100755#page-install and embedded the library directly from handsontable server. And then I tried the basic initialization with my view:

{{extend 'layout.html'}}


<div id="example"></div>


<script src="http://handsontable.com/dist/handsontable.full.js"></script>
<script>
    var data = [
      ["", "Ford", "Volvo", "Toyota", "Honda"],
      ["2014", 10, 11, 12, 13],
      ["2015", 20, 11, 14, 13],
      ["2016", 30, 15, 12, 13]
    ];


    var container = document.getElementById('example');
    var hot = new Handsontable(container, {
      data: data,
      minSpareRows: 1,
      rowHeaders: true,
      colHeaders: true,
      contextMenu: true
    });
</script>


<link rel="stylesheet" media="screen" href="http://handsontable.com/dist/handsontable.full.css">

It doesn't work. No errors, just blank where the table should be. I realized it works on desktop web2py just like it should, so the problem is with pythonanywhere. What can I do?

Are you using http or https? Could there be a mixed-mode security problem?

https, of course. I don't know about that.

try changing the <link> tag to using http as well?

[edit] sorry, I meant https

And the <script> tag?

I don't know what you mean. They are both http, as in OP. I thought you asked, what is in my address bar and that is https. Tried changing all three to either http or https and it doesn't work. (well, with http in the address bar it doesn't let me log in, so..)

OK, well, it's probably best to leave them all as https. http pages are allowed to load https resources, but https pages will often show a warning/not load http resources.

Are any errors showing up in the javascript console? You can open it up with Ctrl+Shift+I, in most browsers.

Oh, the console. How come I didn't think of that :D in fact it said:

Mixed Content: The page at '(my pythonanywhere address)' was loaded over HTTPS, but requested an insecure script 'http://handsontable.com/dist/handsontable.full.js'. This request has been blocked; the content must be served over HTTPS.

if left as http, and:

Mixed Content: The page at '(my pythonanywhere address)' was loaded over HTTPS, but requested an insecure script 'http://handsontable.com/bower_components/handsontable/dist/handsontable.full.js'. This request has been blocked; the content must be served over HTTPS.

if changed to https. So it looks like handsontable redirects to another page which happens to be http. So I changed the tags to link directly to that page and made it https and now it works! Thank you for your help. I'll contact handsontable for more about the issue.

I'll leave my final code here if someone else happens to need it:

{{extend 'layout.html'}}

<div id="example"></div>

<script src="https://handsontable.com/bower_components/handsontable/dist/handsontable.full.js"></script>
<script>
    var data = [
      ["", "Ford", "Volvo", "Toyota", "Honda"],
      ["2014", 10, 11, 12, 13],
      ["2015", 20, 11, 14, 13],
      ["2016", 30, 15, 12, 13]
    ];

    var container = document.getElementById('example');
    var hot = new Handsontable(container, {
      data: data,
      minSpareRows: 1,
      rowHeaders: true,
      colHeaders: true,
      contextMenu: true
    });
</script>

<link rel="stylesheet" media="screen" href="https://handsontable.com/bower_components/handsontable/dist/handsontable.full.css">

Excellent -- thanks for letting us know what the fix was :-)