CODEWITHSUNDEEP
javascriptjqueryhandsontable
FellowFinn
FellowFinn

Reputation: 25

How to get jQuery .change() to reference cell on a Handsontable?

Trying to do: I want to save user changes on a Handsontable to the database. One way that I think I could do is to have a hidden html form where form inputs are referenced to specific cells inside the Handsontable.

Problem: I can't reference a specific cell inside the Handsontable in my .change function.

What I have tried below: Trying to get any changes that user does to cell row(2)column(2) and change html form id row2col2formInput to that value.

    <script>
            //fetch handsontable input for row 2 colum 2 and change corresponding hidden form input
            $("#example").handsontable.(data[2][2]).change(function() {
                $("#row2col2formInput").val($(this).val());
            });


$(document).ready(function () {


  var
 data = [
    ['', 'Kia', 'Nissan', 'Toyota', 'Honda'],
    ['2008', 10, 11, 12, 13],
    ['2009', 20, 11, 14, 13],
    ['2010', 30, 15, 12, 13]
  ],
    container = document.getElementById('example'),
    hot;  


  hot = new Handsontable(container, {
    data: data,
    minSpareRows: 1,
    colHeaders: true,
    contextMenu: true
  });


});


</script>

Upvotes: 0

Views: 1589

Answers (1)

ZekeDroid
ZekeDroid

Reputation: 7209

Well to start with, you're right that the line where you reference the cell is wrong. And you won't be able to reference a cell by quite the way you're doing it. Not that you should anyways.

Here is another way of achieving this task which, by the way, is something most of us using HOT do anyways.

I don't know your database structure so it's hard to say, so let's say that you're using SQL and that each row is a physical row on some table in your db. Now, as you may know, each row in SQL should have a unique primary autoincrementing key which you can use to reference rows by, this comes in handy when you start shuffling around rows in HOT.

Now let's say you have a simple JS with the HOT instance as you described. The data object is the one supplying the data to the HOT instance but more importantly, it's a highly mutating object. As the user makes changes to the cells, this object is mutated.

What this means is that you could add a Submit button somewhere that would grab the object at that time and send it to your db. This is one approach used frequently. Here is where the unique SQL id comes in handy. Your data object could be appending this ID to existing rows and making it a hidden column (no need to show the user this info).

If the user creates a new row, then you can append a negatively decrementing integer (to represent a "new" row in the db), and when the user submits, you simply iterate through the data object and do an UPDATE on rows that have a positive ID, and an INSERT on rows with negative IDS.

That's about it. Another option is that you can use the afterChange event to automatically save to the DB every change as it happens. Your function would say something like

afterChange: function(changes, source) {
    // changes is an array of changes, where each change has 4 values, in order:
    // row index, col index, old value, new value
    changes.forEach(function(change) {
        var row = change[0];
        var col = change[1];
        var newVal = change[3];

        var hiddenIdIndex = data[row].length - 1; // put the hidden id always at the end
        var hiddenID = data[row][hiddenIdIndex];

        // make a call to your function which talks to the SQL db
        saveToDB(hiddenID, col, newVal);
        // in the function, you could first see if the ID exists in the system.
        // If it does, do an UPDATE using the newVal and the column name, or
        // simply suply this function with the entire row (data[row]). If it
        // doesn't exist, do an INSERT with the data[row].
    })
}

Hope this helps!

Upvotes: 1

Related Questions