getData() in Handsontable gives "Object doesn't support property or method 'getData'" error

StackOverflow https://stackoverflow.com/questions/19098186

  •  29-06-2022
  •  | 
  •  

Question

My task is to save data from handsontable to json file.I keep getting "Object doesn't support property or method 'getData'" error, after clicking "submit" button.Please take a look at the following code and let me know , where i went wrong. Thanks in advance.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1./jquery.min.js" type="text/javascript"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script src="http:\\localhost\NetOptUI2\bin\jquery-handsontable-master\dist_wc\x-handsontable\jquery.handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http:\\localhost\NetOptUI2\bin\jquery-handsontable-master\dist_wc\x-handsontable\jquery.handsontable.full.css">
</head>
<body>

<h3 class="title">MHEX Time Sample</h3>
<div id="handsontable">

<div id="divButtons">
<input type="Button" name="submit" value="submit" class="btnSubmit"/>
</br>
</br>
Console: </br>
<span id="exampleconsole"></span>
</div>
</div>

<script>
var $container = $("#handsontable");
var handsontable = $container.data('handsontable');
var data = [
var data = [
  ["", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi"],
  ["2009", 0, 2941, 4303, 354, 5814],
  ["2010", 5, 2905, 2867, 412, 5284],
  ["2011", 4, 2517, 4822, 552, 6127],
  ["2012", 2, 2422, 5399, 776, 4151]
var config = {
  data: data,
  minRows: 15,
  minCols: 6,
  minSpareRows: 1,
  autoWrapRow: true,
  colHeaders: true,
  currentRowClassName: 'currentRow',
          currentColClassName: 'currentCol',              
          contextMenu: { items: {
                                  "row_above": {},
                                  "row_below": {},
                                  "hsep1": "---------",
                                  "col_left": {},
                                  "col_right": {},
                                  "hsep2": "---------",
                                  "remove_row": {},
                                  "remove_col": {}
                                  }
                        }
                        };

 $("#divButtons").find(".btnSubmit").click(function () {
 $.ajax({
 url: "json/save.json",
 data: {"data": handsontable.getData()}, //returns all cells' data
 dataType: 'json',
 type: 'POST',
 success: function (res) {
   if (res.result === 'ok') {
    console.text('Data saved');
  }
  else {
    console.text('Save error');
   }
 },
  error: function () {
  console.text('Save error. POST method is not allowed on GitHub Pages. Run this example on your  own server to see the success message.');
  }
 });
});

 $("#handsontable").handsontable(config);

 var console = $("#divButtons").find("#exampleconsole");
 console.text("Initialized....");
 </script>
 </body>
 </html>
Était-ce utile?

La solution

Your issue is you are creating the reference too early.

var $container = $("#handsontable");
var handsontable = $container.data('handsontable');

before even the plugin transforms to table. Try this way:

$.ajax({
        url: "json/save.json",
        data: {
            "data": $container.data('handsontable').getData() //Now get it
        }, //ret
....

or move it to the end

$("#handsontable").handsontable(config); //<-- here after creating the plugin
var $container = $("#handsontable");
var handsontable = $container.data('handsontable');

In the fiddle check console where the data has been logged.

Fiddle

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top