使用AJAX或jQuery更新HTML表

Question

From what I have read here on AJAX, it is for updating a page without having to refresh it. I have read further , and notice that (at least) the JavaScript part of it has you sending data to another page.

From my knowledge and experience on jQuery, it is basically a powerful library for JavaScript.

What I am trying to do

I am trying to have buttons that allow users to add and delete from the table. I already know that I am most likely going to be using AJAX for loading the table contents (as it is not just that I am trying to have loaded, and a dropdown menu is going to determine the table that gets displayed). My question is, when the user clicks the buttons to insert/delete table rows themselves, should I have jQuery handle that in-place, or should I send the table to a document via AJAX to be manipulated and sent back? (I am trying to get that nice no-reload feature on my page.)

Answer 1

If you have just simple button, that removes an row from the table, for example:

<tr id="table_row_id">
  <td>some info</td>
  <td><button class="remove-row">Remove</button></td>
</tr>

Yes you need jQuery listener for click event on that button. For example:

// This could easily be a call to .click()
$('.remove-row').on('click', function() {
  var idToRemove = $(this).parent().attr('id');
  $.ajax({
    method: "POST",
    data: {
      'action': 'remove',
      'id': idToRemove
    },
    success: function(response) {
      // here you can check if the element is removed from the server
      // based on the response that the server returns.
      // And if it is, you can remove it from the dom.
      $('#' + idToRemove).remove();
    },
    error: function(error) {
      // Here you can show an user message, "Sorry cannot remove element."
    } //...
  });
});

All you need to realize is that, this is async programming and you just defining callbacks. When the server has done the work and the response is received, the callback is called.

So you can reload the table, based on user interact or interval of time.

I recommend:

• Do not send HTML to the server, just send some json data, Same for the server - Do not respond with HTML or hardly to escape symbols, just respond with a string 'done' or json {"removed": "someID"}. HTML parsers on different languages are different, you need escaping for the HTML, You will have problems with JSON parsers if you sending json data with HTML inside. So just send JSON with information what exactly you request is trying to do? which element you trying to read/create/update/delete?
• If you create/update/delete some item from the DB / Server which item has an ID, everytime return the ID back from the server to the client. Most of times it's better to handle exactly what item you are removed.
• Read about CRUD operations.