Retrieving data from a handsontable

Retrieving data from a handsontable

Hi All!

I am trying to learn how to use the handsontable from the demos and I am having the devil's time of it. I can get the table to display, I can put data into but I cannot, for the life of me, figure out how to retrieve the data.

For NOW, the intent is to retrieve the data, put it in a hidden <INPUT> so I can submit it via POST. This will change to ajax at some point.

Here's what I have so far.

First, here's the HTML:

  1. <div class="handsontable" id="example"></div>
  2. <input type="button" name="submit" value="submit" onclick="submitForm()" />
  3. <input type="hidden" id="hidGridContents" />
Now the handsontable setup (which works). It's in the document ready function

  1.       var data = [
  2.         ["", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi"]
  3.       ];
  4.      
  5.       $('#example').handsontable({
  6.         data: data,
  7.         minSpareRows: 1,
  8.         colHeaders: true,
  9.         contextMenu: true
  10.       });
    Finally, the code that is supposed to retrieve the information:

  1. <script type="text/javascript">
  2. function submitForm(){
  3.       var $container = $('#example');
  4.       var ht = $container.handsontable('getInstance');
  5.       var htContents =  ht.getData();
  6.      
  7.       $('#hidGridContents').val(htContents);
  8.       alert(htContents);
  9. }
  10. </script>
In this last code snippet, Line 3 gives me a valid reference, line 4 executes and then skips to the end of the code. I assume it is because an error occurred but I am not seeing anything in the console.

Any assistance would be greatly appreciated.

Thanks in advance.