How to get data out of a handsontable

2,026 views

Skip to first unread message

Menachem Bazian

unread,

Oct 30, 2014, 8:35:23 AM10/30/14

to handso...@googlegroups.com

I am developing on Ubuntu 14.04 and using FireFox with Firebug and FireQuery. I am just learning handsontable. Here's my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->

<script src="http://handsontable.com/lib/jquery.min.js"></script>
<script src="http://handsontable.com/dist/jquery.handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http://handsontable.com/dist/jquery.handsontable.full.css">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css">


<style>
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}
</style>

<script type="text/javascript">

$(document).ready(function () {

      var data = [
        ["", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi"]
      ];
      
      $('#example').handsontable({
        data: data,
        minSpareRows: 1,
        colHeaders: true,
        contextMenu: true
      });
      
      function bindDumpButton() {
          $('body').on('click', 'button[name=dump]', function () {
            var dump = $(this).data('dump');
            var $container = $(dump);
            console.log('data of ' + dump, $container.handsontable('getData'));
          });
        }
      bindDumpButton();

    });

</script>

<script type="text/javascript">
function submitForm(){
      var $container = $('#example');
      var htContents = JSON.stringify($container.handsontable('getData'));
      //var htContents =  ht.getData();
      
      $('#hidGridContents').val(htContents);
      alert(htContents);
}

</script>

</head>
<body>

<div class="handsontable" id="example"></div>
<input type="button" name="submit" value="submit" onclick="submitForm()" />
<input type="hidden" id="hidGridContents" />


</body>
</html>

All I want to do is get the information out of the handsontable and see what it looks like so I can handle it on a submit. I am not using Ajax in this form (I might move to it later).

Here's my problem. When I click on the button, it gets a reference to the handsontable in $container. When I try to get the data out of the handsontable, however, nothing happens and it skips right to the end of the function. I am not getting any error messages in the console.

When I break the execution right after I get the reference, I tried executing $container.handsontable('getData') in the immediate window of the console tab in FireBug and I get an error "TypeError: this.__FireQueryShared is undefined". I do not see this during normal runtime.

I am stumped. I have tried everything I can think of with the information given in the FAQ, WIki and whatever I can find on google and no luck. I would appreciate any help you could offer.

Thanks

trebuchetty

unread,

Oct 31, 2014, 12:53:05 PM10/31/14

to handso...@googlegroups.com

Your code seems to work fine in jsFiddle.

Reply all

Reply to author

Forward

0 new messages