How to refresh table, row or cell content after database content update

Question

I'd like to know if it's possible and how to update a table cell or the whole row (or the whole table if it's easier) after I update a value of that row in the database.

Here's a sample of the table

<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover" id="user_list">
        <thead>
            <tr>
            <th> Row ID </th>
            <th> Name </th>
            <th> Status </th>
            <th> Update Date </th>
            <th> Action </th>
            </tr>
        </thead>
        <tbody>
            <!-- Table data loaded here from jQuery/Ajax after search-->
        </tbody>
    </table>
</div>

The table is loaded/populated after a search is performed and everything works just fine. Notice you are not seeing the button in this table because the button is generated with a dynamic id and it's included in the ajax call that appends the table data after the search.

Now, I have a button that when clicked, it updates a specific cell of a row in the database. What I'd like to do is that after the update is successful, for either the table, row or cell to display the updated value without having to refresh the entire page. My wish is for it to be just the cell so I can add a fadeIn effect but anything that helps will do.

I'm thinking it should be done on the ajax success callback but I am unsure of how to accomplish this.

Here's a sample of the script that updates the database.

$(".row-update-btn").click(function(){
var row = $(this).attr('id');
    $.ajax({
    type : 'POST',
    url  : 'row_update_test.php',
    data : {id:row},
    cache: false,
    success :  function(data)
       {
            alert(row); //simple test to see which record number was updated.
            //this is where I believe the refresh/reload code should go?
            }
        });
});

After row is updated, you can invoke the button as do search again. — BrTkCa, Oct 05 '16 at 18:28
I'd suggest you to add more details and make working JSFiddle example. This question is really *unanswerable* as writen at the moment. — Artur Filipiak, Oct 05 '16 at 18:40
Let me see how I can better address my question. I'll post an update once I'm ready. Thanks for the feedback. — BlueSun3k1, Oct 05 '16 at 18:51

score 0 · Answer 1 · edited May 23 '17 at 12:19

0

It sounds like your basic goal here is to prevent your submit button from submitting the form. there are a couple of different options for that depending on your implementation. here is a very useful link with examples:

Disable form auto submit on button click

edited May 23 '17 at 12:19

Community

1
1

answered Oct 05 '16 at 19:28

Bobert123

103
8

How to refresh table, row or cell content after database content update

1 Answers1