handsontable .getData by div id is not working?

Question

I'm trying to get the filled data using the div id but it is throwing $container.data(...) is undefined.

<!-- ... -->
    <div id="app" style="width: 500px; height: 200px;"></div>   
</div>
<button id="app_id" onclick="json()">Json</button>

I have tried the following code to get the filled data:

var rowHead = colAr;
var colHead = dataObj[idname].col;
var data = [[]],
    container = document.getElementById("app"),
    selectFirst = document.getElementById('selectFirst'),
    rowHeaders = document.getElementById('rowHeaders'),
    colHeaders = document.getElementById('colHeaders'),
    hot;

hot = new Handsontable(container, {
    minRows:rowHead.length,
    minCols:colHead.length,
    startRows: 5,
    startCols: 5,
    rowHeaders: rowHead,
    colHeaders: colHead,
    contextMenu: false,
    outsideClickDeselects: false,
    removeRowPlugin: true
});
hot.loadData(data);

function json() {
    var $container = $("#app");
    var handsontable = $container.data('handsontable').getData();
    console.log(handsontable);
/*
    var htContents = hot.getData();
    var jsonObj = {};
    for (var i = 0; i < htContents.length; i++)
    {
    jsonObj[rowHead[i]] = htContents[i];
    }
    console.log(jsonObj);
*/  


}

But it is throwing error, instead I tried with another option:

var cont = hot.getData();
console.log(cont);

This is working. But I have multiple tables so I need to get the data by the particular table using the div id, what is the problem in my code?

Have you instantiated `handsontable()` on `#app`? What is `hot`? Any errors in the console? We need to see much more of your code to be able to help you. — Rory McCrossan, Sep 29 '17 at 06:59
@RoryMcCrossan Post edited. In console it is throwing `$container.data(...) is undefined` error. — mkHun, Sep 29 '17 at 07:04
You need to put your jQuery code in a document.ready event handler — Rory McCrossan, Sep 29 '17 at 07:05
@RoryMcCrossan I have tried the several method `$().ready with $().click` all are the method showing the same error as `$container.data(...) is undefined`. — mkHun, Sep 29 '17 at 07:09
Can you create a Codepen or similar with this example so that we can look at it and decide ? Because the underlying issue is not obvious from the code. — Ghassen Louhaichi, Oct 06 '17 at 09:28
The `div` with `id="app"` doesn't have `handsontable` data attribute. — Kumar_Vikas, Oct 06 '17 at 11:33

score 4 · Accepted Answer · edited Oct 11 '17 at 10:58

4

Finally got the answer

 $('#app .ht_master tbody td').each(function(){
    var text = $(this).text();
 });

edited Oct 11 '17 at 10:58

bhansa

6,166
2
23
42

answered Oct 09 '17 at 09:13

mkHun

5,507
1
25
65

score 0 · Answer 2 · answered Oct 06 '17 at 14:20

use .handsontable() instead of .loadData.

HTML:

<div id="app"></div>   
 <a href="javascript:void(0)" id="app_id">Json</a>

JAVASCRIPT:

$(document).ready(function(){
var data = [[]],
    container = document.getElementById("app"),
    hot;

hot = {
        data:data,
    minRows:15,
    minCols:6,
    startRows: 5,
    startCols: 5,
    contextMenu: false,
    outsideClickDeselects: false,
    removeRowPlugin: true
};

$('#app').handsontable(hot);
//hot.loadData(data);

$('#app_id').on('click',function(){
debugger
var result = $('#app').data('handsontable').getData();
});
});

Follow This Fiddle

handsontable .getData by div id is not working?

2 Answers2