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

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>

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