34943

Keyup issue with escape-code input

Question:

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:

<pre class="snippet-code-js lang-js prettyprint-override">$('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); }); }); }); <pre class="snippet-code-css lang-css prettyprint-override">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; } <pre class="snippet-code-html lang-html prettyprint-override"><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>

Answer1:

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 send 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...

Recommend

  • Fork/Join kill siblings/branches
  • h1, h2, h3.. elements eats div margins
  • Fading between images
  • Jquery Mobile + Phonegap improve listview performance
  • Compare a column between 2 csv files and write differences using Python
  • href inside href [duplicate]
  • Per Machine App Registration
  • PHP Handling Namespace with SimpleXML
  • Quickly or concisely determine the longest string per column in a row-based data collection
  • Angular2 emit event up to the DOM tree
  • Firebase, only get new children
  • GitHub default README markup
  • How to autopopulate a field in SugarCRM form
  • Group list of tuples by item
  • Sending keystrokes/mouse clicks to a Java program with Autohotkey
  • IE11 throwing “SCRIPT1014: invalid character” where all other browsers work
  • How to disable all widgets inside Panel or inside Composite?
  • Force show.bind execution
  • gspread or such: help me get cell coordinates (not value)
  • Do I need to reset a Perl hash index?
  • How to match http request and response using Jersey ContainerRequestFilter and ContainerResponseFilt
  • Use of this Javascript
  • jQuery .attr() and value
  • Disable Enter in editText android
  • Different response to non-authenticated users and AJAX calls
  • MySQL WHERE-condition in procedure ignored
  • Knitr HTML Loop - Some HTML output, some R output
  • Web-crawler for facebook in python
  • align graphs with different xlab
  • How to delete a row from a dynamic generate table using jquery?
  • trying to dynamically update Highchart column chart but series undefined
  • using HTMLImports.whenReady not working in chrome
  • How does Linux kernel interrupt the application?
  • Linking SubReports Without LinkChild/LinkMaster
  • Authorize attributes not working in MVC 4
  • apache spark aggregate function using min value
  • EntityFramework adding new object to nested object collection
  • Easiest way to encapsulate a HTML5 webpage into an android app?
  • git trying to push non-existent file … after clearing cache
  • java string with new operator and a literal