Reloading a table without reloading the webpage

Question

I currently have a table that you can add / delete / remove all the items from but in order to actually see that you have removed an item or cleared the table I need to reload the webpage. I was wondering if there was another way of just reloading the table instead of reloading the webpage

Answer 1

You would have to use AJAX to get data back from the server.

In your server, you would have a page that serves json containing relevant data, and you will parse it and update the page.

So for example, you could route mytable/update to a method in your server, and you would call it like so:

jQuery.ajax('/mytable/update)

The callback would have the actual json . Be wary of CSRF

However, you mentioned that your table only has an add and delete. Is there data coming from the server? You might be able to replicate your code from the server in the client itself so you could just make the changes themselves with javascript, which would help reduce server load.

Answer 2

For deleting a row:

 $('#myTableRow').remove();

This works fine if your row has an id, such as:

<tr id="myTableRow"><td>blah</td></tr>

For adding :

$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');

And assuming tat your item is in a row :)