How to properly pass table data through Javascript function

Question

I am using django to set up a basic web app. I have a Handsontable, which using a form, allows users to update the table, press a SAVE button and save the changes to a csv file. My problem is that I cannot figure out how to pass the data properly.

My approach is that the afterChange function should, when the table is updated, pass the data into the table_data_dump div in order for this to be used in python code pressing the SAVE button executes.

However it doesnt seem to be doing this, and I can't figure out the proper usage of the data variable. I'm new to JS so getting confused pretty easily.

Full JS below:

    <script type="text/javascript">

        $.ajaxSetup ({
            // Disable caching of AJAX responses
            cache: false
        });

        var data = [['', '', '', ''], ['', '', '', ''], ['', '', '', ''],
                    ['', '', '', ''], ['', '', '', ''], ['', '', '', ''],
                    ['', '', '', ''], ['', '', '', ''], ['', '', '', '']];

        var dataArray = {};

            dataArray['bnb'] = '/static/data/oim-oimom/lookup_bnb.csv'

            dataArray['testsplit'] = '/static/data/oim-oimom/lookup_testsplit.csv'

            dataArray['test two'] = '/static/data/oim-oimom/lookup_test-two.csv'


        var afterChange = function() {
            console.log(JSON.stringify(data));
            document.getElementById('table_data_dump').innerHTML = JSON.stringify(data)
        };

        var createTable = function(data) {

            var container = document.getElementById('lookup');
            var hot = new Handsontable(container, {
                data: data,
                afterChange: afterChange,
                minSpareRows: 1,
                rowHeaders: true,
                colHeaders: ['col1','col2','col3', 'Assignment'],
                columns: [
                    {readOnly: true},
                    {readOnly: true},
                    {readOnly: true},
                    {}
                ],
                colWidths: [335, 335, 335, 335]
                })};

        createTable(data);

        var SelectBoxChange = function() {
            var e = document.getElementById("split_name_select");
            var split_select = e.options[e.selectedIndex].text;
            $.get(dataArray[split_select], function(data) {
                document.getElementById('lookup').innerHTML='';
                data = $.csv.toArrays(data);
                createTable(data);

            });

        };

    </script>

Answer 1

I've figured this out, so just in case it is of use to anyone else...

I should have been using the getData() method of the Handsontable here, however it was giving me an undefined error for hot.getData() because of the scope of my variables. I changed these to global and then could access the data.

Further to this afterChange needs to be set using the updateSettings() method after the table is created. This is to allow the container to be defined, to then be referenced in the afterChange function before being assigned.

Thanks