Brandon Brandon - 1 month ago 11
Javascript Question

Keyup issue with escape-code input

I am writing a page to take information out of a database table and place it into an HTML table. I am then using jQuery to make any

<td>
cell editable upon being clicked on and am now trying to use the jQuery keyup function to detect when the editable cell has been edited and then use ajax to update the database with the edited information. keyup is picking up when numbers, letters, and the space bar are pressed but for some reason it is not picking up when the backspace, delete, or enter keys are being pressed. I am not sure if I have an error in my code or what could be causing this.

Any comments or suggestions would be extremely helpful, thank you very much!

Here is the jQuery I am using for the click event and then also for keyup along with a quick table example:



$('td').click(function() {
var val = ($(this).siblings().first().text());
var col = $(this).parent().children().index($(this));

$(this).prop('contenteditable', true);

$(this).keyup(function() {
$.ajax({
method: "POST",
url: "updatedatabase.php",
data: {
content: $(this).text(),
date: val
}
})
.done(function(msg) {
alert("Data Saved: " + msg);
});
});
});

table, th, td {
border: 1px solid black;
border-collapse: collapse;
font-size: 90%;
}
th, td {
padding: 8px;
}
td {
text-align: center;
}
table {
margin: 0 auto;
}
td:click {
background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th></th>
<th>22oz Dark</th>
<th>12ct 4oz Dark</th>
</tr>
<tr>
<th>2016-01-01</th>
<td>9785</td>
<td>2478</td>
</tr>
<tr>
<th>2016-01-02</th>
<td>8754</td>
<td>2136</td>
</tr>
<tr>
<th>2016-01-03</th>
<td>13587</td>
<td>2203</td>
</tr>
<tr>
<th>2016-01-04</th>
<td>14111</td>
<td>3297</td>
</tr>
<tr>
<th>2016-01-05</th>
<td>13212</td>
<td>3101</td>
</tr>
<tr>
<th>2016-01-06</th>
<td>16335</td>
<td>3299</td>
</tr>
<tr>
<th>2016-01-07</th>
<td>15421</td>
<td>3100</td>
</tr>
</table>




Answer

To pick up changes, you could find the input event useful: it triggers even on changes that are made via the mouse or context menu (think copy/paste, ...etc).

You should also definitely take out the inner event handler from the outer event handler. As you have it now, you'll accumulate the number of keyup event handlers every time you click on the same td element.

Also, I don't think you want users to change the first column, as it contains the key you sent to the server.

So here is what I suggest:

// exclude first column from jQuery selection:
$('td').not(':first').click(function() {
  $(this).prop('contenteditable', true);
});

// Use input event, and define it outside of above event handler:
$('td').on('input', function() {
  console.log('event');
  $.ajax({
    method: "POST",
    url: "updatedatabase.php",
    data: {
      content: $(this).text(),
      date: $(this).siblings().first().text() // calculate on-the-spot
    }
  })
  .done(function(msg) {
    alert("Data Saved: " + msg);
  });
});

Unrelated to your question: you make the content editable when the user clicks on a cell. You never make it uneditable afterwards, so one could wonder why you don't make them all editable from the start...