Triggering table update javascript function for a table row separate from the html?

Question

I'm trying to keep a strict separation of javascript with html merging together and my current issue is that I have multiple html tables on a page, whenever you click on a box in the table it is editable and should on clicking off the box update the table sending the information to the SQL database dynamically.

Now my issue is that the way I currently have it doing it which is inside the html row is not something I'm a fan of as shown below:

onblur="update_table(this, 'column name', 'row id', 'sql table name')"

I'm trying to work out how I can give the function this information without passing it through directly as variables into the function.

So rather than having a trigger onblur, have a listener in the javascript, something like this:

 $('.A Class Name for rows or something').on('blur', function () {

My thought process is that I should have a specific class name that all rows have so that it listens in on that class name? Now I'm just wondering how I get the information from the row like column name, row id and what sql table it needs to go to.

Please let me know if this doesn't make sense!

Answer 1

To add metadata to an element you can use data attributes. Then you can read those from the element when the event occurs on it. Try this:

<input type="text" class="foo" data-columnname="column name" data-rowid="row id" data-sqltablename="sql table name" />

$('.foo').on('blur', function() {
  var $el = $(this);
  update_table(this, $el.data('columnname'), $el.data('rowid'), $el.data('sqltablename'));
});

It's also worth noting that there's a couple of potential code smells here. Firstly, either pass the element reference (ie. this ) to the function or the relevant properties, not both. Secondly, requiring both the 'table name' and 'column name' in the client-side function is a little odd. It's also potentially an attack vector exposing this information to any user viewing the site.

Answer 2

Now I'm just wondering how I get the information from the row like column name, row id and what sql table it needs to go to.

My first instinct is that information shouldn't be in the HTML at all. And whether it is or not, any updates to the DB should be rigorously checked, since the client side of this is infinitely hackable. But including that information in the HTML makes it easier to hack.

You could replace your onblur with data-* attributes on the row. Instead of the onblur , you might have:

data-column="column name" data-rowid="row id" data-table="sql table name"

or

data-q="sql table name,column name,rowid"

or similar.

Then you could have a class on the table that says you should do this blur behavior, and use event delegation to catch blur from cells in tables where you've enabled this:

$(document.body).on("blur", ".handle-blur td", function() {
    var q = $(this).attr("data-q"); // ...or the individual ones...
    // ...call `update_table` here...
});

But , again, I don't think I'd put this in the HTML at all. I'd probably reach for some kind of MVC or MVVM solution (React, etc.) so the information wasn't quite as exposed. It doesn't change the need to rigorously validate on the server side, but it helps a bit with obscurity.