refresh table after ajax success

Question

I want to refresh my table after ajax success

 function deleteUser(id){ $.ajax({ url: 'insert.php', type: 'POST', data: {'submit':id}, // An object with the key 'submit' and value 'true; success: function (result) { alert(result) } }); } 

 <table id="table-demo" style=" border:1px solid #00CCFF!important;" class="table table-striped"> <thead> <tr> <th>id</th> <th>username</th> <th>pass</th> <th>email</th> <th>level</th> <th>status</th> <th>last login</th> <th></th> <th></th> </tr> </thead> <tbody> <?php $usersQry="select * from admins"; $usersQryResult=mysqli_query($dbCnn,$usersQry); $c=1; while($user=mysqli_fetch_array($usersQryResult)){ echo" <tr> <td>$c</td> <td>$user[user]</td> <td>$user[pass]</td> <td>$user[email]</td> <td>$user[level]</td> <td>$user[status]</td> <td>$user[lastlogin]</td> <td><i class='fa fa-pencil-square-o' title='delete'></i></td> <td>**<i onclick=\\"deleteUser($user[id])\\" class='fa fa-trash-o ' title='edit'></i>**</td> </tr> "; $c++; } ?> <!--insert.php --> if(isset($_POST['submit'])){ $idval=$_POST['submit']; $query="delete from admins where id=$idval"; $result=mysqli_query($dbCnn,$query) or die("error 100"); echo mysqli_affected_rows($dbCnn); echo "## $idval"; } </tbody> </table> 

after click on delete the user with posted id value to insert.php delete successfuly from admins table of data base. how is it possible refresh table after success of ajax?

Answer 1

You have to do

call function as deleteUser($user[id],this)

function deleteUser(id,thisObj){
           $.ajax({
            url: 'insert.php',
            type: 'POST',
            data: {'submit':id}, // An object with the key 'submit' and value 'true;
            success: function (result) {
            alert(result);
            //if success
            $(thisObj).parents("tr:first").remove();
            }
        }); 

}

Answer 2

There is two ways to achieve this:

---

1) You pass the element you've clicked on, and use it in jQuery to find the row to remove from your table:

HTML / PHP

// ...
<td><i onclick=\"deleteUser($user[id], this)\" class='fa fa-trash-o ' title='edit'></i></td>
// ...

jQuery:

function deleteUser(id, element) {
    $.ajax({
        url: 'insert.php',
        type: 'POST',
        data: {'submit':id}, // An object with the key 'submit' and value 'true;
        success: function (result) {
            $(element).parents("tr").remove();
        }
    }); 
}

This solution is quite simple, and doesn't need too much refactoring from your current code

---

2) Your insert.php returns the table once you've already updated the database, and you replace the old table in your HTML

generate_table.php

<table id="table-demo" style=" border:1px solid #00CCFF!important;" class="table  table-striped">
    <thead>
        <tr>
            <th>id</th>
            <th>username</th>
            <th>pass</th>
            <th>email</th>
            <th>level</th>
            <th>status</th>
            <th>last login</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <?php
        $usersQry="select * from admins";
        $usersQryResult=mysqli_query($dbCnn,$usersQry);
        $c=1;
        while($user=mysqli_fetch_array($usersQryResult)){
            echo"
            <tr>
                <td>$c</td>
                <td>$user[user]</td>
                <td>$user[pass]</td>
                <td>$user[email]</td>
                <td>$user[level]</td>
                <td>$user[status]</td>
                <td>$user[lastlogin]</td>
                <td><i class='fa fa-pencil-square-o' title='delete'></i></td>
                <td>**<i onclick=\"deleteUser($user[id])\" class='fa fa-trash-o ' title='edit'></i>**</td>                    
            </tr>
            ";

            $c++;
        }
        ?>  
    </tbody>
</table>

insert.php

<?php
if(isset($_POST['submit'])){
    $idval=$_POST['submit'];
    $query="delete from admins where id=$idval";
    $result=mysqli_query($dbCnn,$query) or die("error 100");
}

include('generate_table.php);
?>

HTML / PHP

<div id=tableContainer">
    <?php
    include('generate_table.php');
    ?>
</div>

jQuery:

function deleteUser(id) {
    $.ajax({
        url: 'insert.php',
        type: 'POST',
        data: {'submit':id}, // An object with the key 'submit' and value 'true;
        success: function (result) {
            $("#tableContainer").html(result);
        }
    }); 
}

This solution requires a bit of refactoring, but you'll be sure that your table will always reflects the currently registered datas

Answer 3

check out DataTables plugin, he's got some good tools for auto-refresh and other things http://www.datatables.net/

I'd suggest reloading the table after the ajax call to make sure everything stays in synch, which is really easy to do with this plugin